我想避免每次想要更改时都必须在 5 个不同的页面上制作菜单。因此，我使用 Javascript 在运行时重新创建菜单，这样我只需更改该脚本即可立即在所有页面上更改菜单(我知道，天才吧？)。
但事情是这样的；虽然代码按预期工作，但当页面的其余部分已加载时，菜单似乎首先加载，即使我使用 window.onload 调用该函数。 。我真的不知道为什么会这样。我的猜测是innerHTML 很慢，或者我在错误的时间加载了脚本。
我尝试在 <head> 加载它但考虑到 DOM 还不存在，这没有多大意义。因此，我将其移至 header 标签，这是菜单代码最初所在的位置，以便在 header 加载时加载。但这是完全相同的行为。
如果我进入菜单直接用 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);
}
最佳答案
对。 window.onload 将在 DOM 的其余部分加载后触发。
如果您将其放置在 header 中(它在 DOM 中所属的位置)，则可以删除 onload 事件，然后就在那里执行此操作。这应该会让它工作得更好。
关于Javascript insideHTML 加载缓慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25968525/