如何将HTML页面包含到另一个没有frame/iframe的HTML页面中?

pra*_*pal 50 html

我想在HTML页面中包含一个HTML页面.可能吗?

我不想在PHP中这样做,我知道在PHP中,我们可以使用include这种情况,如何在不使用iframeframe概念的情况下实现纯粹的HTML ?

ken*_*bec 41

您可以使用对象元素

<object type="text/html" data="urltofile.html"></object>
Run Code Online (Sandbox Code Playgroud)

或者,在本地服务器上,AJAX可以返回一个HTML(responseText)字符串,您可以使用该字符串进行记录.编写一个新窗口,或者编辑出head和body标签,并将其余部分添加到div中的div或其他块元素中.当前页面.

  • 不幸的是,即使您没有在子HTML中使用OBJECT或EMBED标签,也会在包含的HTML中引入HEAD / BODY标签。这将破坏验证并导致间距问题,因此这不是最佳解决方案。 (3认同)
  • Up - 没有CORS问题! (2认同)

Dan*_*ant 32

如果您只是试图从另一个文件中坚持自己的HTML,并且您认为服务器端包含为"纯HTML"(因为它看起来像HTML注释并且没有使用像PHP那样的"脏" ):

<!--#include virtual="/footer.html" -->
Run Code Online (Sandbox Code Playgroud)

  • 这不是纯HTML解决方案吗? (14认同)
  • @ Sam152:嘘!; - ] (12认同)
  • 嘿,我有一个想法,我已经将整个内容包含在 javascript - document.write 中。然后将javascript文件放在html中。它工作 (3认同)
  • 是的+1。它可能是更好的方法。他还说他不想使用 iframe,所以谁知道哪种解决方案最有效。 (2认同)
  • 如果使用服务器端包含 (SSI),您需要意识到您的文档可能难以缓存,因为修改时间和内容长度都是动态的。使用 Apache,您可以使用 XBitHack Full(在 UNIX 上)或 mod_expires 来设置到期时间。由于这个原因,我最终没有使用 SSI。 (2认同)
  • 只是一个评论。您需要在服务器上安装 SSI 的服务器才能正常工作,但情况并非总是如此。 (2认同)

Che*_*ian 26

如果您的意思是客户端,那么您将不得不使用JavaScript或框架.
简单的方法开始,尝试jQuery

$("#links").load("/Main_Page #jq-p-Getting-Started li");
Run Code Online (Sandbox Code Playgroud)

更多关于jQuery Docs

如果您想使用IFrame,请从IFrame上的Wikipedia开始

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
        <title>Example</title>
  </head>
  <body>
        The material below comes from the website http://example.com/
        <iframe src="http://example.com/" height="200">
            Alternative text for browsers that do not understand IFrames.
        </iframe>
   </body>
</html>
Run Code Online (Sandbox Code Playgroud)

  • 嘿,我有了一个主意,我已将全部内容包含在 javascript - document.write 中。然后将 javascript 文件放入 html 中。它工作 (2认同)

Mui*_*uis 23

你可以使用HTML5:

  <link rel="import" href="/path/to/file.html">
Run Code Online (Sandbox Code Playgroud)

  • 我喜欢你的解决方案.+1 (4认同)
  • 自 Google Chrome 73 起此方法已过时。尽量避免使用此解决方案。https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports (4认同)
  • @Joyal不,这是HTML5的一部分,一些浏览器已经支持它,但对于那些不支持它的人,你可以使用聚合物来填充它.http://caniuse.com/#search=import (3认同)
  • 这对许多网络浏览器都不起作用,如果对某人(像我这样)有问题:http://caniuse.com/#feat=imports (2认同)
  • 这是一个干净的解决方案。警告:浏览器支持很冒险 (2认同)

Sam*_*152 11

<iframe src="page.html"></iframe>
Run Code Online (Sandbox Code Playgroud)

您需要为此iframe添加一些样式.您可以指定宽度,高度,如果您希望它看起来像原始页面的一部分frameborder="0".

在纯HTML中没有其他方法可以做到这一点.这就是他们的目的,就像说我想要一个没有鸡蛋的鸡蛋.

  • 当你这样做:有没有办法你可以在iframe内点击链接来改变整个窗口? (6认同)

ash*_*rio 5

如果您愿意使用jquery,那么有一个名为"inc"的方便的jquery插件.

我经常将它用于网站原型设计,我只想向客户端提供静态HTML,没有可以快速创建/编辑/改进/重新呈现的后端层

http://johannburkard.de/blog/programming/javascript/inc-a-super-tiny-client-side-include-javascript-jquery-plugin.html

例如,菜单和页脚之类的东西需要显示在每个页面上,但是你不希望最终得到一个复制粘贴的东西

您可以包含页面片段,如下所示

<p class="inc:footer.htm"></p>
Run Code Online (Sandbox Code Playgroud)


小智 5

<html>
<head>
<title>example</title>
    <script> 
   $(function(){
       $('#filename').load("htmlfile.html");
   });
    </script>
</head>
<body>
    <div id="filename">
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

  • 我不相信你的代码在没有包含 jquery 的情况下会起作用。 (2认同)