script在Html中的摆放位置
来源:互联网 发布:linux如何退出top 编辑:程序博客网 时间:2024/04/30 12:26
以前认为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(){})中也是可以的,原理和上面是一样的,这个方法是等页面加载好了才执行,所以不管放在哪都可以了!
阅读全文
0 0
- script在Html中的摆放位置
- script在html中的摆放位置
- <script>标签在html中的位置
- script标签在html中的位置
- <script>标签在HTML中的位置
- 关于Script放在html中的位置是否影响页面加载
- 关于<Script>标签在html页面放置位置
- 关于<Script>标签在html页面放置位置
- 关于<Script>标签在html页面放置位置
- JavaScript在HTML中的位置
- js在html中的位置
- javascript在html文件中的位置
- 浅谈JavaScript在Html页面中的位置
- [转]音箱摆放位置
- php去除html中的script
- 用CSS设置位置摆放
- 获取Html元素在页面中的绝对位置及问题
- 获取Html元素在页面中的绝对位置及问题
- 送给SDUTACM暑假集训同学们的一些话
- 库与运行库
- 这六个小细节SEO网站优化需要注意
- 图论总结(7)并查集
- @EnableAutoConfiguration
- script在Html中的摆放位置
- 分组对称加密模式:ECB/CBC/CFB/OFB
- 将数据从文件中读出并排序
- Eclipse使用:从git克隆maven项目
- vue.js import/require数组后computed监听失败
- 04.assetbundle下载
- ROC曲线知识
- (上传文件错误)java.lang.NoClassDefFoundError: org/apache/commons/fileupload/FileItemFactory
- ios 百度地图api所遇到的问题以及解决方法