我創建了一個變異觀察器來在某些條件下洗掉（阻止）腳本。
有幾種 SO 解決方案表明它可以作業。例如：https : //stackoverflow.com/a/65453574/4688612
但它在我的情況下不起作用 <script src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"></script>
出于某種原因，對 googletagmanager.com 的網路呼叫仍然會在每個頁面加載時發生。
Google Chrome 和 Firefox 都加載腳本。
現在我不確定使用突變觀察器方法是否根本不可靠或有問題，或者它是否是我的代碼中的錯誤。
有沒有可靠的解決方案？
這是我的代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="#">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script>
const observer = new MutationObserver( (mutations) =>{
mutations.forEach(({addedNodes}) => {
[...addedNodes]
.forEach(node => {
$(node).remove()
});
});
})
observer.observe(document.head, { childList: true });
</script>
<script src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"></script>
</head>
<body></body>
</html>
```
uj5u.com熱心網友回復：
在本地測驗這個
這可能不是答案，但我無法在評論中說明這里可能存在的問題。
我已經創建了一個 index.html 就像你的一樣，但是有一個本地加載的腳本test.js。我還添加console.log(node);了您的觀察者。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MutationObserver test</title>
<link rel="shortcut icon" href="#">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
const observer = new MutationObserver( (mutations) =>{
mutations.forEach(({addedNodes}) => {
[...addedNodes]
.forEach(node => {
console.log(node);
$(node).remove()
});
});
});
observer.observe(document.head, { childList: true });
</script>
<script src="test.js"></script>
</head>
<body></body>
</html>
test.js
console.log("I got loaded before you could remove me.");
這會導致以下控制臺日志：
index.html:21 " "
index.html:21 <script src=?"test.js">?</script>?
index.html:21 " "
所以觀察者正在作業，因為它也捕獲只有空白字符的空節點。
但是在 Network 選項卡中，test.js它仍然被列為已加載：
Name Status Type Initiator Size Time
index.html Finished document Other 972 B 1 ms
test.js Finished script index.html 56 B 3 ms
jquery-3... 200 script index.html 31.0 kB 10 ms
index.html Finished text/html Other 972 B 1 ms
似乎 HTML 節點已被洗掉，瀏覽器正在預取代碼。這很可能發生，因為 HTML 檔案本身無論如何都會傳輸。然后瀏覽器決議 HTML 并查看所有要請求的檔案。一旦HTML檔案變成瀏覽器中運行的觀察者DOM，洗掉節點，只是在時間將不會從觀察者之后的節點執行JavaScript。
See this counterexample where I comment out the observing part:
// observer.observe(document.head, { childList: true });
In this case the console output will read:
test.js:1 I got loaded before you could remove me.
The network panel will look nothing different. So it seems as I'm using Chrome, it tries to perfect speed and will load and cache the JavaScript but it will not execute it since its node got removed.
Possible TagManager / Google Anyltics insights
If you have access to alter the TagManager's tags you might just add <script>console.log("TagManager code executed");</script> and confirm this way code execution is correctly suppressed for the removed tag. So confirming the same as my example with a local JS file but in TagManager directly.
Another way is Google TagManager's excellent Debug mode.
If Google Analytics is used here as well you might see your requests (or lack thereof) in the GA Real-Time view (well... bad documentation with no screenshots. Just look for real-time in Analytics you will find it).
uj5u.com熱心網友回復：
嘗試使用以下解決方案
添加defer或async到谷歌標簽管理器腳本標簽。這使頁面加載后的谷歌標簽管理器腳本。
<script src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"></script>
變成
<script defer src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"></script>
或者
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"></script>
還為 google 標簽管理器代碼呼叫您的洗掉腳本，這將確保您的腳本將在 google 標簽管理器腳本加載之前加載。
了解更多資訊defer并async 點擊這里
以下代碼對我來說作業正常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="#">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script>
const observer = new MutationObserver( (mutations) =>{
mutations.forEach(({addedNodes}) => {
[...addedNodes]
.forEach(node => {
$(node).remove()
});
});
})
observer.observe(document.head, { childList: true });
</script>
<script defer src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"></script>
</head>
<body></body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/348601.html
標籤：javascript 查询
上一篇：如何每小時彈出模態？