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（也已过时/不推荐使用）：

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

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

另一个是insertionQuery：

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

Answer 2

如果您可以确定要更改的Facebook部分的className或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>