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>

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

是否可以在生成内容后运行脚本。 让我们说修改生成的输出中的跨度元素？

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

Answer 1

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

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

$('.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 。

另一个是插入查询：

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>