您的位置：首页 > Web前端 > JavaScript

html5学习--js语句在html文档中的位置

2017-02-26 22:16 387 查看

最近用html5做了个计时器的小项目。由于久不用html5，所以对js略生疏，遇到了js语句在html文档中位置差异的问题。

常见做法是把js单独写成一个文件并在head元素中调用。对于小块的js语句，在html文档中的位置就有所考虑。百度了一下，下面这篇文章对js位置做了一个Q&A示范（原文链接见HTML5关于js在body中的位置的问题），整理如下：

示例代码：

<!DOCTYPE HTML>
<html>

<body>

<script type="text/javascript" >
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>

</html>

该代码的问题在于js语句块在canvas前，当js执行 document.getElementById(“myCanvas”)时，canvas并未生成，因此产生报错。

正确的代码如下：

<!DOCTYPE HTML>
<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript" >
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
</body>

</html>

此时按照文档顺序，先生成canvas再执行js，正常通过。

另一种处理方法是利用windows.onload方法，确保文档生成后在去执行js语句块。代码如下：

<script type="text/javascript" >
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
}
</script>

另请参阅：

1、【解决方案】如何实现在HTML页面加载完毕后运行某个jshttp://blog.csdn.net/fifteen718/article/details/50963073

2、页面自动执行（加载）js的几种方法http://blog.csdn.net/zdnlp/article/details/14231067/

3、关于JSP中body标签中onload中函数不执行问题http://www.cnblogs.com/atp-sir/p/5752512.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 javascript html

相关文章推荐

新的分享

章节导航