Question

我想在HTML页面中包含HTML页面。可能吗？

我不想在PHP中这样做，我知道在PHP中，我们可以使用include来解决这种情况，如何在不使用iframe的情况下在HTML中实现相同的目标。 frame概念？

Answer 1

您可以使用对象元素

<object type="text/html" data="urltofile.html"></object>

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

Answer 2

如果您只是想从另一个文件中粘贴自己的HTML，并认为 Server Side Include 是“纯HTML”（因为它看起来像HTML）注释并没有像PHP一样使用“脏”的东西：

<!--#include virtual="/footer.html" -->

Answer 3

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

$("#links").load("/Main_Page #jq-p-Getting-Started li");

更多jQuery Docs

如果您想使用IFrame，请从IFrames

开始使用维基百科

<!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>

Answer 4

您可以使用HTML5：

  <link rel="import" href="/path/to/file.html">

Answer 5

<iframe src="page.html"></iframe>

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

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

Answer 6

如果你愿意使用jquery，有一个方便的jquery插件叫做“inc”。

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

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

例如，菜单和页脚等内容需要在每个页面上显示，但您不希望最终获得复制粘贴效果

您可以按如下方式添加页面片段

<p class="inc:footer.htm"></p>

Answer 7

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

Answer 8

(function(){
    //this is the correct reference
    var canvas = document.getElementById('canvas');
    var renderer = Matter.Render.create({
        canvas: canvas,
        height: 1000,
        width: 1000
    });
})()

Answer 9

我得到的最好的：包含在您的js文件中，并包含您可以这种方式添加的视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Bootstrap</title>
    <!-- Your custom styles (optional) -->
    <link href="css/style_different.css" rel="stylesheet">
</head>

<body>
    <script src="https://www.w3schools.com/lib/w3data.js"></script>
    <div class="">
      <div w3-include-html="templates/header.html"></div>
      <div w3-include-html="templates/dashboard.html"></div>
      <div w3-include-html="templates/footer.html"></div>
    </div>
</body>
<script type="text/javascript">
    w3IncludeHTML();
</script>
</html>

Answer 10

你可以说它是用PHP的，但实际上它只有一个PHP命令，所有其他文件只是* .html。

您的Web服务器的/ public_html目录中应该有一个名为.htaccess的文件，或者您的html文件所在的另一个目录中，您将在其中处理一个命令。
如果你没有它，（或者它可能是隐藏的（你应该通过检查目录中的隐藏文件检查这个目录列表）），你可以用记事本创建它，只需在其中输入一行：
AddType application/x-httpd-php .html
使用名称.htaccess保存此文件，并将其上传到服务器的主目录。
在你想要外部“meniu.html文件出现的任何地方的html文件中，添加te命令： <?php include("meniu.html"); ?>。

这就是全部！

备注：像<? ...>这样的所有命令都将被视为php可执行文件，因此如果您的html有问号，那么您可能会遇到一些问题。

Answer 11

另请务必查看如何使用Angular includes（使用AngularJS）。它很直接......

<body ng-app="">
  <div ng-include="'myFile.htm'"></div>
</body>

Answer 12

如果你在linux上使用NGINX并且想要一个纯粹的bash / html，你可以在你的模板上添加一个掩码，并使用sed命令管理请求，以使用一个regullar表达式进行替换。

无论如何，我宁愿拥有一个从模板文件夹中获取的bash脚本并生成最终的HTML。

Answer 13

来自nginx的最佳解决方案：http://sysoev.ru/nginx/docs/http/ngx_http_ssi_module.html

Answer 14

确认roadkill，在web根目录中创建一个.htaccess文件，其中包含一行，允许您将php代码添加到.html文件中。

AddType application / x-httpd-php .html

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

14 个答案: