為什麼非同步載入腳本中 document.write() 受到限制？

非同步載入腳本中的執行限制：了解document.write() 限制

嘗試從非同步載入的腳本寫入文件會引發異常控制台訊息“無法在'文檔'上執行'寫入'：除非明確打開，否則無法從異步加載的外部腳本寫入文檔。”儘管腳本的行為符合預期，但此消息可能會出現，讓開發人員感到困惑。

為什麼存在限制

非同步載入的腳本通常在文件解析後執行，並且關閉。因此，在此類腳本中使用 document.write() 會出現問題，因為文件不再開放寫入。

解決方案：明確 DOM 操作

而不是使用 document .write()，開發人員必須在非同步載入的腳本中明確操作 DOM。這涉及創建 DOM 元素並使用 .appendChild()、.insertBefore() 等方法將它們插入到所需的父元素中，或設定 .innerHTML。

範例：DOM 運算

為了說明這一點，請考慮以下內嵌腳本：

<div id="container">
<script>
  document.write('<span style="color:red;">Hello</span>');
</script>
</div>

在非同步載入的腳本中，此程式碼可以替換為：

var container = document.getElementById("container");
var content = document.createElement("span");
content.style.color = "red";
content.innerHTML = "Hello";
container.appendChild(content);

或者，因為容器是空，可以使用以下簡化程式碼：

var container = document.getElementById("container");
container.innerHTML = '<span style="color:red;">Hello</span>';

透過採用這些DOM 操作技術，開發人員可以有效地從非同步載入的腳本寫入文檔，避免document.write() 施加的限制。

以上是為什麼非同步載入腳本中 document.write() 受到限制？的詳細內容。更多資訊請關注PHP中文網其他相關文章！