0

ページが提供されるときに既に存在する HTML 要素に JavaScript を使用していくつかの簡単な変更を加えています (div 要素の背景画像の変更、ID の追加など)。これはもちろん、変更が DOM に反映されていないように見える IE8 を除くすべてのブラウザーで正常に機能するため、JS の実行後に dom を解析すると、探している要素が見つかりません。このページは、ヘッダー内の 2 つの JavaScript ファイルで構成されています。1 つは、私が制御できない外部のサードパーティ スクリプトですが、ID と背景画像を追加するスクリプトです。2 番目は私のもので、最初の後に呼び出され、新しい ID を持つ特定の要素を探してドキュメントを解析しています。どちらも外部スクリプトであり、HTML ソースにインライン化されていません。

私が言えることから、次のいずれかです。

  • 競合状態、2 つの外部 Javascript が実行されています。1 つはボタンを変更して ID を追加し、もう 1 つは特定の要素を探して dom を解析しています。同時に実行されているため、2 つ目は要素を見つけられません。
  • 変更が行われた後、IE8 が DOM を適切に更新しない

私のJSは頭の最初のJSの後に呼び出されるので、ブロッキングが競合状態を引き起こさず、JSが実行される前に要素が利用可能になると仮定します

私が試したこと：

  • コードを実行する前に DOM を強制的に更新するクラスを本体に追加しようとしました
  • 私は IE8 開発者ツールを使用しましたが、id と要素は存在しませんが、数回更新すると魔法のように表示されます (この時点でページは既に完全に読み込まれており、完全に操作できます)。

何か案は？

ありがとう！

4

1 に答える 1

1

注意すべきことの 1 つは、複数の<script>タグを作成する場合、タグが読み込まれる順序が保証されないことです。また、タグの作成方法によっては、通常、タグが読み込まれるとすぐに処理が開始されます。

したがって、1 つのローカル ファイルと 1 つのファイルを 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 要求をどのように処理して、何がどの順序で発生するかを決定する方法にすべて依存します。

だから - 解決策に：

document1)の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 が適切な状態になった後にのみ、そのイベントを発生させています。

于 2012-07-24T22:48:18.747 に答える