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

window.onload使用时遇到的问题_1

2016-11-22 17:38 127 查看

一个简单的创建节点插入节点的代码。

若把window.onload函数这样写，运行会出现错误。

错误代码：window.onload=function()
{
var para=document.createElement("p");
var txt1=document.createTextNode("This is");
para.appendChild(txt1);

var emphasis=document.createElement("em");
var txt2=document.createTextNode(" my ");
emphasis.appendChild(txt2);

para.appendChild(emphasis);

var txt3=document.createTextNode("content. ");
para.appendChild(txt3);

var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);
}

第一句在 js文件被加载时立即执行。

(1)若js文件是从HTML文档的<head>部分用<script>标签被调用的，它将在HTML文档之前加载到浏览器里。
(2)若<script>标签位于文档底部</body>之前，就不能保证那个文件先结束加载(浏览器可能一次加载多个).因为脚本加载时，文档可能不完整，模型也不完整。没有完整的DOM，createElement等方法就不能正常工作。

所以，必须让这些代码在HTML文档被加载到浏览器之后马上开始执行。

HTML文档全部加载完毕时将触发一个事件，这个事件有它自己的事件处理函数。

文档将被加载到一个浏览器窗口，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在。

所以，可以将JS代码打包放在一个函数里，并把这个函数添加到window对象的onload事件上去就可以正常运行。

正确代码：

window.onload=prepare;
function prepare()
{
var para=document.createElement("p");
var txt1=document.createTextNode("This is");
para.appendChild(txt1);
var emphasis=document.createElement("em"); var txt2=document.createTextNode(" my "); emphasis.appendChild(txt2); para.appendChild(emphasis); var txt3=document.createTextNode("content. "); para.appendChild(txt3); var testdiv=document.getElementById("testdiv"); testdiv.appendChild(para); }

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

标签： window.onload javascript 函数

相关文章推荐

新的分享

章节导航