javascript 运行作为页面加载后的最后一个脚本

Question

我想知道是否可以编辑运行并生成 dom 内容的嵌入式 js 的内容。例如 fb js 评论代码或分析代码。

是否可以将运行函数作为站点上运行的最后一个函数，以便我能够修改嵌入式脚本生成的呈现内容。让我们举个例子：

<div id="fb-root"></div>
                <script>(function(d, s, id) {
                  var js, fjs = d.getElementsByTagName(s)[0];
                  if (d.getElementById(id)) return;
                  js = d.createElement(s); js.id = id;
                  js.src = \'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2\';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, \'script\', \'facebook-jssdk\'));</script>

当此代码呈现时，它会生成一个评论框，如下所示：

是否可以在生成内容后运行脚本。假设修改生成的输出中的 span 元素？

编辑：我对 CSS 解决方案不感兴趣。我知道 CSS，我专门询问了 JAVASCRIPT。不是 CSS

Answer 1

你不能只使用 css 来做到这一点吗？ !important 在这些情况下可以提供帮助...

如果没有，您可以使用 jQuery Live Query plugin 但我认为它有点过时...

$('.theElementSelector').livequery(function() {
  //your code to change appearance of controls
});

或者您可以使用 DOMNodeInserted（也就是 outdated/deprecated）：

$('body').on('DOMNodeInserted', '.theElementSelector', function(e) {
  //your code to change appearance of controls
});

更好的解决方案是使用MutationObserver。

另一个是insertionQuery:

insertionQ('theElementSelector').every(function(element){
    //callback
});

Answer 2

如果您能找出您想要更改的 Facebook 部分的类名或 CSS 选择器。您可以直接更改这些样式表。

下面是一个演示这一点的小片段。如果我们假设类名 .test 是这个 Facebook 插件上的某个 CSS 选择器，您可以像下面这样更改颜色。 setInterval当然是不需要的，它只是为了表明它是实时变化的。

let cssEntry;

for (const s of document.styleSheets) {
  for (const r of s.cssRules)  {
    if (r.selectorText === ".test") {
      cssEntry = r;
    }
  }
}

let c = 0;
const colors = ["red", "green", "blue"];

setInterval(() => {
  cssEntry.style["background-color"] = colors[(c++)%3];
}, 1000);

.test {
  color: white;
  background-color: black;
}

<div class="test">
  <p>This should be white text on black background<p>
  <p>But in a few seconds should change between red / green / blue every second by directly changing the CSS inside the loaded stylesheet</p>
</div>

javascript 运行作为页面加载后的最后一个脚本

javascript run as last script after page loaded

javascript

onload-event

javascript 运行 作为页面加载后的最后一个脚本

javascript run as last script after page loaded

javascript

onload-event

javascript 运行作为页面加载后的最后一个脚本