Question

在普通javascript中加载页面后调用内容的最佳不引人注目的方式是什么？当然在jquery我会用

$(document).ready(function(){...});

但我不确定普通js中最可靠的方法。

显然

window.onload = ...

不是正确的解决方案，因为它会覆盖以前的声明。

我想要做的是在页面加载后将iframe插入到div中，但实际上可能有更好的方法。我的计划是做一些像

这样的事情

window.onload = function(divId){
 var div = document.getElementById(divId);
 div.innerHTML = "<iframe src='someUrl' .. >";
}

编辑：不包括所有必要的细节而道歉。该脚本不适用于我的网站 - 我的想法是在外部网站上显示我网站的一部分（表单）。优先考虑的是尽量减少某人为使用我的代码而付出的努力。这就是为什么我想保留js文件中的所有内容，而<script>中除了<script src="http://my.website/code.js" />之外什么都没有。如果我更改了iframe的网址或者我想添加一些功能，我想更新所有其他网站上的代码而不要求他们进行任何更改。
我的方法可能是错的 - 任何建议都非常受欢迎。

Answer 1

//For modern browsers:
document.addEventListener( "DOMContentLoaded", someFunction, false );

//For IE:
document.attachEvent( "onreadystatechange", someFunction);

`attachEvent` and `addEventListener` allow you to register more than one event listener for a particular target.

请参阅： https://developer.mozilla.org/en/DOM/element.addEventListener

还绝对值得一看jQuery是如何做到的： http://code.jquery.com/jquery-1.7.js搜索bindReady。

Answer 2

只需将您的脚本包含在文档的最末端，紧接在结束</body>标记之前或之后，例如：

(content)
(content)
<script src="http://my.website/code.js"></script>
</body>
</html>

脚本上方的所有标记都可以通过常用的DOM方法（reference）访问。显然，并非所有辅助资源（图像等）都会完全加载，但可能这就是为什么你要避免window load事件（它发生得太晚）。

ready - 样式事件的唯一真正目的是，如果您不控制脚本被包含的位置（例如，库），或者您需要先将执行在页面加载后，页面加载和其他，并且您希望避免两个HTTP请求（例如，对于两个不同的脚本，一个在加载之前，一个在之后）。 / p>

Answer 3

使用window.addEventListener和事件load或DOMContentLoaded：

window.addEventListener('DOMContentLoaded',function(){alert("first handler");});
window.addEventListener('DOMContentLoaded',function(){alert("second handler");});

object.addEventListener('event',callback)会将事件侦听器插入到该特定对象事件的队列中。有关详细信息，请参阅https://developer.mozilla.org/en/DOM/element.addEventListener。

对于使用window.attachEvent('event',callback)的IE5-8，请参阅http://msdn.microsoft.com/en-us/library/ms536343%28VS.85%29.aspx。你可以为自己建立一个小帮手功能：

function addEventHandler(object,szEvent,cbCallback){
    if(typeof(szEvent) !== 'string' || typeof(cbCallback) !== 'function')
        return false;
    if(!!object.addEventListener){ // for IE9+
        return object.addEventListener(szEvent,cbCallback);
    }
    if(!!object.attachEvent){ // for IE <=8
        return object.attachEvent(szEvent,cbCallback);
    }
    return false;
}
addEventHandler(window,'load',function(){alert("first handler");});
addEventHandler(window,'load',function(){alert("second handler");});

请注意，IE {9}中未定义DOMContentLoaded。如果您不知道收件人的浏览器，请使用事件load。

普通javascript中不显眼的onload的最佳方式

3 个答案: