页面加载后如何运行函数?

2020/10/10 04:21 · javascript ·  · 0评论

我想在页面加载时运行一个函数,但是我不想在<body>标记中使用它

我有一个脚本,如果在中将其初始化,则可以运行<body>,如下所示:

function codeAddress() {
  // code
}
<body onLoad="codeAddress()">

但是我想在没有的情况下运行它,<body onload="codeAddress()">并且我尝试了很多事情,例如:

window.onload = codeAddress;

但这是行不通的。

那么如何在页面加载后运行它?

window.onload = codeAddress;应该可以工作-这是一个demo,以及完整的代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

自从jQuery发行以来,本机JavaScript不再使用jQuery或window.onload,而是采用了一些很棒的功能。现在,所有现代浏览器都具有自己的DOM ready函数,而无需使用jQuery库。

如果您使用本机Javascript,我建议您这样做。

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

以达林的答案,但jQuery的风格。(我知道用户要求使用JavaScript)。

运行小提琴

$(document).ready ( function(){
   alert('ok');
});​

替代解决方案。为了简洁和简化代码,我更喜欢这样做。

(function () {
    alert("I am here");
})();

这是一个匿名函数,其中未指定名称。这里发生的是,函数是一起定义和执行的。将其添加到正文的开头或结尾,具体取决于是在加载页面之前执行还是在所有HTML元素加载之后立即执行。

window.onload = function() { ...等不是一个很好的答案。

这可能会起作用,但也会破坏已经挂接到该事件的所有其他功能。或者,如果在您的事件之后另一个函数挂接到该事件,它将破坏您的事件。因此,您可以花大量时间在后面,以弄清楚为什么现在不再有用。

一个更可靠的答案在这里:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

我一直在使用一些代码,但忘记了在哪里找到它,以使作者感到赞赏。

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

希望这可以帮助 :)

尝试readystatechange

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

状态在哪里:

  • loading-文档正在加载(摘要中未触发)
  • 交互式的-文档被解析,之前触发DOMContentLoaded
  • 完成-加载文档和资源,然后触发window.onload

看看 domReady脚本脚本允许设置在加载DOM后执行的多个功能。这基本上是Dom ready在许多流行的JavaScript库中所做的事情,但是它是轻量级的,可以在您的外部脚本文件的开头进行添加。

用法示例

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);

window.onload将像这样工作:

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;
<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title>
	<script src="custom.js"></script>
</head>
<body>
	<p id="test"></p>
	<li>abcd</li>
</body>
</html>
本文地址:http://javascript.askforanswer.com/yemianjiazaihouruheyunxinghanshu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!