用另一个 html 文件加载一个 html 文件答案

【问题标题】：loading a html file with another html file用另一个 html 文件加载一个 html 文件
【发布时间】：2012-03-12 12:00:26
【问题描述】：

我正在尝试制作一个具有动态下拉菜单的 HTML 页面（比如说 index.html）。我想要做的是将我的下拉菜单保存在单独的 html 文件（menu.html）中，以便更容易维护。我想知道的是如何在 index.html 文件中加载 menu.html 文件？

我尝试了一些框架示例，但包含 DD 菜单的 menu.html 文件没有出现在索引页面中。

例如，我在我的索引页面中尝试过这个，但没有出现：

<frameset rows="200,*" frameborder="0" border="0" framespacing="0">
<frame src="menu.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>

【问题讨论】：

改用<iframe src="menu.html"></iframe>。
如果你使用iframe标签，别忘了加上宽度和高度。
最好使用动态语言，例如 php。我建议这个教程tutorialzine.com/2011/08/jquery-mobile-mvc-website-part-2
解决方案在这里：stackoverflow.com/questions/39447411/…

标签： html

【解决方案1】：

如果您想保留 HTML，请使用：<iframe src="menu.html" width=400 height=200></iframe> 用你想要的宽度和高度。

但最好的办法是通过包含这样的文件来使用 PHP：
<?php include('menu.html'); ?>

但最终是你的选择。

【讨论】：

【解决方案2】：

尝试按照here 的说明指定列宽。

<frameset cols="100%">
  <frameset rows="200, *">

【讨论】：

【解决方案3】：

如果你使用 php，你可以简单地包含它。这是一个教程链接，向您展示如何做到这一点tutorial。如果您不使用 php，则忽略此答案，但这比对内容的显示方式有很多限制的框架要好得多。

【讨论】：

【解决方案4】：

您可以为此目的使用 jQuery 和 .load() 函数。

例子：

jQuery:

$(function() {
    $("#menu").load("menu.html");
});

HTML：

<div id="menu">
</div>

【讨论】：

【解决方案5】：

使用jQuery你可以处理它

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#divId").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="divId"></div>
  </body> 
</html>

【讨论】：