在HTML页面中包含HTML页面

问题描述：

我有一个网站，我想用我的下拉菜单作为网站中任何链接的单独代码。 http://www.stelianpopa.ro/photo/ancar.html 我在menu.html中使用我的菜单代码，并基于此示例在网站上进行了集成：http://api.jquery.com/load/ 代码已加载，但大多数时间下拉菜单不起作用，即使似乎已加载，它只显示第一行，而不是“照片”和“视频”的子菜单在HTML页面中包含HTML页面

对此有何帮助？基本上我想要的是我的菜单作为一个独立的文件，并加载到我的网站上的任何html作为参考，因为当我想在菜单中添加一些东西时，我必须在每一个html上都这样做，这就是为什么我想单独使用，为每个html修改一次。对不起，我的英语不好。

您的下拉菜单不适用于开始。 Chrome状态行覆盖子菜单 – mplungjan

答

如果尚未创建包含菜单（下拉菜单）的html文件。

然后，在您要使用该菜单的每个页面上，包含一个指向您为菜单创建的html文件的iframe。

例如：

Menu.html

<html> 
<head></head> 
<body> 

<!-- code for menu --> 

</body> 
</html>

你想使用

<html> 
<head>...</head> 
<body> 

<!-- content --> 
<iframe src='path/to/menu.html'>Sorry, but your browser does not support iframe.</iframe> 

</body> 
</html>

希望这对你的作品的菜单每一页。

当然，有比使用iframe更好的选项。一个小脚本可以很容易地将菜单注入页面 – Clint

Yap，我不想使用iframe，因为我的菜单使用一些css进行样式设置，还有一些用于加载的java。 – user3236448

如果您不想使用iframe，您可以使用脚本动态地将菜单（如html）添加到您的身体。就像@ Clint所说的那样。 –

答

如果没有模板，可以使用javascript将模板加载到页面上。我会成立一个小型项目是为了避免复制粘贴，但基本都低于

在身体上想要的菜单：

<div id="my-nav-menu"></div>

脚本：

document.addEventListener('DOMContentLoaded', function() { 
    var menu = document.getElementById('my-nav-menu'); 
    menu.innerHTML = 'menu html here'; 
});

更新

我刚刚注意到了jquery标签，因此您可以使用以下脚本代替：

$(document).ready(function() { 
    $('#my-nav-menu').html('menu html here'); 
});

这只是许多可用解决方案之一，它很容易，但绝对不是最好的。

在HTML页面中包含HTML页面

相关推荐