Question

我在body的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>

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

P.S。您还可以拆分代码，在页面加载之前解析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 个答案: