2017-07-09 14 views
1

問題:機能にJavascriptを包み、ページがロードされた後に呼ばれる:Javascriptがページが読み込まれる前にプロンプ​​トが表示されないようにする「ロード」または「DOMContentLoaded」はなぜですか?

ソリューションをロードし、私のページの前に解雇しました。

残念ながら、動作しませんでした。ここに私の例があります。

私は単純な2ページのテストサイトを持っています。最初のページには青い背景と2番目のページへのリンクがあります。最初のページのリンクをクリックすると、2ページ目のスクリプトのプロンプトが2ページ目が読み込まれる前の最初のページに表示されます。 loadまたはDOMContentLoadedはこれを変更していないようです。私は何か間違っていると確信していますが、私はそれを見つけられません。

ページ1

<body style="background-color:blue"> 
    <a href="page_2.htm">Click this link.</a> 
</body> 

ページ2

<script> 
    function globalFunction() { 
     prompt("input a number"); 
    } 
</script> 

私は2ページ目の機能の上にこのコードを追加しますが、プロンプトは前に早期に最初のページの上にポップアップ表示し続け2ページ目が読み込まれました。

document.addEventListener("DOMContentLoaded", globalFunction); 

私はこれを試しましたが、同じ結果が得られました。

window.addEventListener("load", globalFunction); 

答えて

3

これは、ブラウザがドキュメント自体に含まれていないUI要素を作成する場合の典型的な動作です。ブラウザはマルチスレッドのソフトウェアであり、prompt()またはalert()の呼び出しは、JavaScriptコードが実行されているスレッドとは異なるスレッドで処理されます。ブラウザはUIを更新できます(この場合、ブラウザーが2番目のページを表示できるようになる前に、JSランタイムが継続するのをブロックします)。

解決策は、2番目のページが読み込まれるまでスクリプトが開始されないようにし、ブラウザがページ表示を更新できるようにプロンプ​​トを十分に延期することです。 2番目のファイルで

にコードを変更:

<script> 
    window.addEventListener("DOMContentLoaded", function(){ 
     setTimeout(function globalFunction() { 
       prompt("input a number"); 
     }, 20); 
    }); 
</script> 

これは、2ページを参照してくださいするのに十分な時間であるべき、20ミリ秒のために実行されているから機能を延期します。

+2

これは役に立ちますが、なぜ必要なのか分かりません。もちろん、この「第2ページ」とその内容についてはあまり知られていません。しかし、関数が "ready"イベントを待っている場合、新しいコンテンツのレンダリングに備えて、* no *コンテンツがそこにあるか、またはウィンドウがクリアされていないのが不思議です。新しいページからのプロンプトを表示するには、リンク先ページの* over *コンテンツが私にとってかなり奇妙なように見えますが、セキュリティ上の懸念事項として認識される人もいます。 – Pointy

+0

これが役に立ちます。 JavaScriptをDOM要素にすると、Drawingオブジェクトから開始しますが、プロンプトで中断されます。 – siranen

関連する問題