2017-02-12 6 views
4

JavaScriptを使い始めるだけです。このオンラインコースでは、<script>タグページの一番下にある<body>の終了タグの直前JavaScriptコードの後に​​最初にレンダリングされたページが表示されるはずですが、実際には別の方法で実行されています。JavaScriptコードが最初に実行されます。私は完全にレンダリングされたウェブサイトを見ることができるメッセージがポップアップで "OK"。ここでウェブサイトのコンテンツが読み込まれる前にalert()スクリプトがポップアップします(たとえHTMLファイルの下にタグが挿入されていても)

が、これは、コードを想定する方法であれば、私は正直分からないコード

index.htmlを

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/main.css"> 
    <title>JavaScript Basics</title> 
</head> 
<body> 
    <div class="container"> 
    <h1>Where to place your JavaScript code.</h1> 
    </div> 
    <script src="scripts.js"></script> 
</body> 
</html> 

scripts.js

alert("This text should appear after page is fully rendered"); 

です働くDoalert();スクリプトは常に最初に実行されますか?おそらくブラウザには何か関係がありますか? (私は最新バージョンのChromeを使用しています)。とにかく、何が起こっているのかよく説明された答えは非常に高く評価されるでしょう。

答えて

0

個人的に、私はより多くのようなものだろう:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/main.css"> 
    <title>JavaScript Basics</title> 
</head> 
<body> 
    <div class="container"> 
    <h1>Where to place your JavaScript code.</h1> 
    </div> 
    <script> 
    window.onload = function() { 
     alert('This should now load after the page.'); 
    } 
    </script> 
</body> 
</html> 

window.onload = fun...「をページの読み込みが完了するまで待つ」と言います。ブラウザーが(画像、レイアウト、プラグインなどで)決定する内容に応じて、これはあなたのために働くかもしれません。

、あるいはのようなもの:この例では

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/main.css"> 
    <title>JavaScript Basics</title> 
</head> 
<body> 
    <div class="container"> 
    <h1>Where to place your JavaScript code.</h1> 
    </div> 
    <script async defer src="scripts.js"></script> 
</body> 
</html> 

async属性は、「バックグラウンドでこのスクリプトファイルをつかむ」を意味し、deferは、「ページがそれを実行するためにロードされるまで待つ」という意味します。

+2

ダウン投票について非常に興味があります。理由を聞くためにKeen。 – Tigger

関連する問題