我最近遇到了一個問題，相同的代碼在某些引擎上運行，而在其他引擎上卻沒有，原因是DOM 方法找不到元素。這引發了另一個問題：給定相同的代碼，為什么有些解釋器/引擎能夠找到元素，而有些則不能？
能夠找到元素的解釋器：
- JSFiddle
- StackSnippet 如果你使用 Edge
無法找到元素的解釋器：
- StackSnippet 如果您使用的是 Firefox（95.0.2 64 位）
- 在 VSCode 打開的 Edge 中
顯然讓解釋器知道你在做什么是很方便的，但是自動假設你的意思有什么缺點，這樣其他人就不會實作這個功能嗎？
這似乎是瀏覽器的問題。那是對的嗎？
uj5u.com熱心網友回復：
這些不是解釋器，它們是腳本運行的背景關系。
它們確實不同，因為例如從通過 HTTPS 發送的服務器運行的相同 .html 頁面并不代表與從file://協議提供的相同頁面相同的安全風險。
雖然在這種情況下我找不到確切的罪魁禍首，但我發現對于 Firefox，它與您的庫正在創建的 WebSocket 連接有關，它確實會拋出 StackSnippets，但我找不到它究竟為什么會拋出 StackSnippets。需要明確的是，問題不在于他們找不到 DOM 元素，而是代碼拋出了一個只處理了一半的 DOMException，因此腳本執行停止了。
try {
const connection = new WebSocket('wss://b95e1176.databases.neo4j.io:7687/');
console.log('passed')
}
catch(err) {
console.log('caught');
}在 jsfiddle 的 iframe 和 StackSnippets 之間的少數區別中，我首先懷疑 StackSnippets 中缺少allow-same-origin子句，然后是缺少window.origin，但鑒于我試圖在 jsfiddle 中重現這兩種情況并且它仍然在那里作業，我現在懷疑這與發送到頁面的 HTTP 標頭，但正如我所說，我不確定。
無論如何，這一切都在說確實可以預期某些代碼在各種背景關系中可能會以不同的方式作業，并且還可以預期不同的瀏覽器將使用各種安全措施，您甚至可以預期同一瀏覽器的未來版本在相同的背景關系。
不幸的是，除了廣泛和定期的測驗之外，我們作為 web-dev 可以做的事情并不多。
uj5u.com熱心網友回復：
的結構
<div id="foo" data-function="bar">string1</div>
<div id="lorem" data-function="ipsum">string2</div>
<div id="dolor" data-function="es">string3</div>
每個元素都有：
- 一個
id - 一個
data-function - 內部文本（一些字串）
的Javascript
function myfunction(context, id, func, str) {
context[id] = undefined;
return context[func] = function() {
var config = {
a: id,
b: str,
//otherConfigs...
};
context[id] = new NeoVis.default(config);
context[id].render();
console.log(`function ${func} was called and ${id} is the id`);
};
}
for (let item of document.querySelectorAll("#foo, #lorem, #dolor")) {
myfunction(window, item.id, item.getAttribute("data-function"), item.innerText)();
}
最后三行開始呼叫myfunction. 現在，如果你沒有用的ID元素foo，lorem并且dolor，然后querySelectorAll回傳一個空陣列類物件和myfunction將永遠不會被呼叫。您需要確保div可以正確找到您的元素并相應地更改選擇器。然后，將它們的函式定義data-function為 div 的值，將它們的字串定義為 div 的內部文本。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406407.html
標籤：