在页面加载之前调用javascript函数

Question

我在主体的onload事件上调用函数load（）。 有时，此功能有效，有时则无效。 根据我的理解，在主体完全加载之前，不会调用此函数。 有什么办法可以在页面加载之前调用此函数？

这是home.html：

<script src="js/custom.js"></script>
<script src="js/props.json"></script>
<body onload="load()">

<a id="beginner">Beginner Level</a>
        <div id="beginner-sub" class="well">
            <!-- append content here -->
        </div>

</body>

custom.js加载函数：

function load() {
    var mydata = JSON.parse(beginner);  
    var rows = "";
    for(var x=0; x < mydata.length; x++)
    {
    rows += '<a href="'+mydata[x].url+'">'+mydata[x].title+'<i class="fa fa-hand-o-right pull-left" aria-hidden="true"></i></a><hr>';
    }
    $("#beginner-sub").append(rows);
    $("#beginner-sub hr:last-child").remove()
}

这是我的props.js

beginner = '[{"title" : "Simple Program", "url" : "simple.html"}, {"title" : "Check Palindrome", "url" : "palindrome.html"}]';

Answer 1

如果将代码移到脚本标签内，则在找到后立即执行：

<head>
...
<script type="text/javascript">
     alert("executed now"); 
</script>
</head>

这是为了回答有关在页面加载之前执行代码的问题。 但是，如果访问某个元素，则必须确保在加载该元素后执行此代码。

ps您还可以拆分代码，在页面加载之前解析JSON，将结果保存在变量中，然后在页面加载之后追加元素。

Answer 2

不可以，不能（或不应该）强制触发body onload事件，但是您可以在有问题的元素之后立即添加脚本标签。

<a id="beginner">Beginner Level</a>
<div id="beginner-sub" class="well">
     <!-- append content here -->
</div>
<script>load();</script>

不过要注意， load()依赖的任何其他函数必须已经加载，否则它将失败

在页面加载之前调用javascript函数

问题描述

2 个解决方案

解决方案1
2 2017-05-02 18:19:52

解决方案2
2 已采纳 2017-05-02 18:20:23

在页面加载之前调用javascript函数

问题描述

2 个解决方案

解决方案1 2 2017-05-02 18:19:52

解决方案2 2 已采纳 2017-05-02 18:20:23

解决方案1
2 2017-05-02 18:19:52

解决方案2
2 已采纳 2017-05-02 18:20:23