script在Html中的摆放位置

最新推荐文章于 2022-10-08 10:23:39 发布

ccc95

最新推荐文章于 2022-10-08 10:23:39 发布

阅读量1.9k

点赞数 1

分类专栏： html5 文章标签： html 函数视频

本文链接：https://blog.csdn.net/ccc95/article/details/77532402

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以前认为script就应该写在head中，今天在写W3School上面的例子的时候，设置函数检测已经点击到要实现功能的按钮（播放/暂停），但是对该视频播放功能却没有实现。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>TestVideo</title>

    </head>

    <body>
        <div style="text-align:center">
            <button onclick="playPause()">播放/暂停</button>
            <button onclick="makeBig()">大</button>
            <button onclick="makeNormal()">中</button>
            <button onclick="makeSmall()">小</button>
            <br />
            <video id="video1" width="420" style="margin-top: 15px;">
                <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4"></source>
                <source src="alert(" 111 ");"></source>

            </video>
        </div>
        <script type="text/javascript">
            var myVideo = document.getElementById("video1");

            function playPause() {
                alert(myVideo);
                if(myVideo.paused) {
                    alert("111");
                    myVideo.play();
                } else {
                    alert("222");
                    myVideo.pause();
                }

            }

            function makeBig() {
                myVideo.width = 560;
            }

            function makeSmall() {
                myVideo.width = 320;
            }

            function makeNormal() {
                myVideo.width = 420;
            }
        </script>
    </body>

</html>

后来查了一下原因是因为，html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到script脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在body之前。其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。就是因为这个，在dom没生成好时我就给它添加了方法，才导致这样。

如果想测试该结论的话，可将script段整段移到head中，弹出框将显示null。

其实还有另外一种方法，那就是用jquery的初始化页面方法，把上面给标签添加的点击事件加入到$(function(){})中也是可以的，原理和上面是一样的，这个方法是等页面加载好了才执行，所以不管放在哪都可以了！

ccc95

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
script在Html中的摆放位置

以前认为script就应该写在head中，今天在写W3School上面的例子的时候，设置函数检测已经点击到要实现功能的按钮，但是对该视频播放功能却没有实现。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>TestVideo</title> </head> <body>
复制链接

扫一扫