我希望每次想要进行更改时都避免在5个不同的页面上创建菜单。所以我使用Javascript在运行时重新创建菜单,这样我就可以改变那个脚本,一次性改变所有页面上的菜单(我知道,天才吧?)。
但事情就是这样;当代码按预期工作时,即使我使用window.onload
调用函数,当页面的其余部分已加载时,菜单似乎首先加载。我真的不知道为什么会这样。我的猜测是innerHTML很慢,或者我在错误的时间加载脚本。
我尝试在<head>
加载它,但考虑到DOM尚未存在,这没有多大意义。所以我将它移动到标题标记,这是最初的菜单代码,以便在标题执行时加载。但它的行为完全相同。
如果我进入任何其他直接用HTML编写菜单的页面,它会像页面的其余部分一样立即加载。有什么建议吗?
window.onload = function () {
var header = document.getElementById("header");
var div = document.createElement('div');
div.className = 'inner';
div.innerHTML =
'<h1><a href="-omitted-" id="logo">Dynamic Realities</a></h1>' +
'<nav id="nav"><ul>' +
'<li><a href="-omitted-">Home</a></li>' +
'<li><a href="-omitted-" target="_blank">Forum</a></li><li>' +
'<a href="-omitted-">Media</a></li>' +
'<li><a href="-omitted-">The Team</a></li>' +
'<li><a href="-omitted-">Open Positions</a></li></ul></nav>';
header.appendChild(div);
}
答案 0 :(得分:2)
右。在 其余的DOM加载后,window.onload
将启动。
如果您将它放在标题中,它位于DOM中,您可以删除onload
事件,然后就在那里执行。这应该会使它更好。