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>