IE8 DOM無法反映JS更改

Question

我正在使用javascript對頁面提供時已經存在的HTML元素進行一些簡單的更改（例如更改div元素的背景圖片，添加ID等）。 當然，這在除IE8之外的所有瀏覽器中都可以正常工作，因為IE8中的更改似乎未反映在DOM中，因此當我在JS運行后解析dom時，它找不到我想要的元素。 該頁面在標題中包含2個javascript文件，其中1個是我無法控制的外部第三方腳本，但該腳本添加了ID和背景圖片。 第二個是我的，它在第一個之后被調用，並且正在解析文檔以查找具有新ID的特定元素。 兩者都是外部腳本，並且不在HTML源代碼中內聯。

從我可以說的是：

• 一種競爭條件，正在運行2個外部Javascript 1正在更改按鈕並添加ID，另一個正在解析dom以查找特定元素，而當它們同時運行時，第二個Javascript找不到元素
• 進行更改后，IE8無法正確刷新DOM

我的JS在頭部的第一個JS之后被調用，因此您可以認為阻塞不會導致競爭條件，並且在我的JS運行之前這些元素將可用

我嘗試過的事情：

• 我嘗試在主體上添加一個類以強制刷新DOM，然后再運行代碼
• 我使用了IE8開發人員工具，但id和元素不存在，但是如果我刷新幾次，它們就會神奇地出現（此時頁面已經完全加載，可以完全與之交互）

有任何想法嗎？

謝謝！

Answer 1

要記住的一件事是，當您創建多個<script>標記時，不能保證它們的加載順序以及它們的構建方式-它們通常會在加載后立即開始處理。

因此，如果要在CDN中包含一個本地文件和一個文件，例如：

<script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" src="/js/my_script.js"></script>

您必須考慮到CDN文件通常比托管文件要快得多。 在上述情況下，這可能是一件好事-因為jQuery網頁上加載之前，你的腳本可能是理想的-但如果你是加載不同的第三方腳本，這可能依賴於某些元素存在於DOM， 你腳本負責創建，您的腳本可能未及時創建它們。

想象一下這種情況：

<script type="text/javascript" src="https://someurl/somelib.js">
    // This script parses the DOM and applies alterations to certain items
</script>
<script type="text/javascript" src="/js/my_script.js">
    // This script creates the DOM elements the other script is supposed to alter
</script>

僅當本地文件/js/my_script.js首先加載時，您的頁面才能工作-這不太可能，因為另一個文件是通過專用CDN提供的。

當兩個文件都在本地提供時，情況甚至更糟：

<script type="text/javascript" src="/js/my_relied_upon_script.js"></script>
<script type="text/javascript" src="/js/my_reliant_script.js"></script>

在這種情況下，這完全取決於您的本地Web服務器如何處理HTTP請求，以便確定以什么順序發生了什么。

因此-解決方案：

1）讓腳本全部等待document的onready事件觸發。 因為此事件僅在文檔完全加載后才發生（包括完全加載其元素（例如腳本，圖像等）所需的任何其他HTTP請求），因此可以確保腳本至少要等到完整的DOM被加載后，已加載。

2）使下級腳本等待觸發事件。

使用jQuery，示例可能類似於以下內容：

// Script #1
$(document).bind('ready', function () {
    $('#NeedsBackground').css({ background: 'url(/gfx/bg.png)' });

    var $wrapper = $('<div />').addClass('wrapper');
    $('#NeedsWrapper').wrap($wrapper);

    // Here's the magic that enforces loading.
    $(document).trigger('Script1Finished');
});

// Script #2
$(document).bind('Script1Finished', function () {
    $('.wrapper').css({ border: '1px solid #000' });
});

現在-請記住，上面的轉換相當糟糕，不是您想要執行的操作（例如，內聯CSS等），但是它們僅舉了一個例子。 因為Script #2要求.wrapper元素在運行之前存在，所以您需要確保它在Script #1發生后發生。

在這種情況下，我們通過在文檔上trigger一個自定義事件來實現此目的，然后我們可以響應該事件，並且僅在DOM處於適當狀態后才觸發該事件。