html、css、js在页面中加载的顺序

2017-02-20  本文已影响0人  掌心的微笑杨


***先告诉大家页面是自上而下按顺序加载的 link->js->body

<!doctype html>

<html>

<meta charset="utf-8">

<title>页面内容执行顺序</title>

 <script >

         function show(){

                     alert(1);

       };

     var oBtn=document.getElementById('btn');

     oBtn.onclick=show;//千万别加括号,加了括号它会先调用函数

</script>

</head>

<body>

      <input type="button" value="点击" id="btn"/>

</body>

</html>

            页面中的js脚本在head中js脚本要读取的input的在body中。浏览器对html页面的加载是按顺序加载的,也就在html中上面的先加载,因此当加载到js脚本时,input还没有加载到浏览器页面中。js是一种解释性的脚本,也是从上而下顺序执行,由于这段js代码是立即执行的,所以当js在执行的时候,所以读取不到input。

最直接的方法是把js放到网页的最下面执行。

<!doctype html>

<html>

<meta charset="utf-8">

<title>页面内容执行顺序</title>

</head>

<body>

       <input type="button" value="点击" id="btn"/>

<script>

       function show(){

            alert(1)

       };

           var oBtn=document.getElementById('btn');

            oBtn.onclick=function(){

                       show();

           };

</script>

</body>

</html>

         把js放到网页最下面,这样js在执行的时候网页内容都已加载完毕。把js放到网页下面加载并不是最好的解决方法,大部分情况js并不是总能放在网页的最下面,这时候可以用window 的onload事件,onload事件在整个页面加载完之后才触发,可以把js脚本放在onload里面执行。

<!doctype html>

<html>

<meta charset="utf-8">

<title>网页内容执行的顺序</title>

<script>

        window.onload=function(){          

             var oBtn=document.getElementById('btn');   

              oBtn.onclick=function(){

                   alert(1);

             };

       };

</script>

</head>

<body>

      <input type="button" value="点击" id="btn"/>

</body>

</html>

上面方法本质是添加onload监听事件

上一篇 下一篇

猜你喜欢

热点阅读