如何将 html 或模板文件包含到 .html 文件中？

问题描述 投票：0回答：6

是否有可能，或者我怎样才能做到这一点，我可以将我的顶栏文件包含到我的页面中，我不希望它与 php 一起使用，因为我还没有与本地主机连接。

提前感谢您的所有帮助！

include
6个回答
5
投票

HTML5 现在允许您包含 html 文件，就像您已经可以通过导入包含 css 文件一样。然而，这仅对您的开发阶段有帮助，对最终生产版本没有帮助，因为该功能目前仅在 Chrome 中可用，其他浏览器需要时间才能采用：http://www.html5rocks.com/ zh/tutorials/webcomponents/imports/

1
投票

如果您不想使用 PHP 或任何其他服务器端脚本语言， 您可以使用 

<iframe>
或 
<frameset>
标签（这些标签已弃用），或者使用动态嵌入 HTML 页面的 Javascript 执行 AJAX 请求。由于现代浏览器中的 XSS 保护，仅当您尝试附加的页面位于同一域内时，第二种方法才有效。

1
投票

可以这么说，这更多的是服务器的事情，所以你必须更多地依赖服务器。因为，您不能简单地使用静态脚本（如 HTML）来执行此操作。没有“内置函数”可以做到这一点，这不是 HTML 的事情。

我的意思是，服务器会为您提供不止一种选择，例如：

您可以：

  1. 如果服务器支持，请使用 SSI（服务器端包含）。

  2. 使用 PHP 或 ASP 包含。

  3. 否则，您可以使用 AJAX 来实现此目的，不会花费您与上述选项一样多的费用。

如果您通过说“topbar”来表示“标题”，我认为使用 iframe 不是一个好主意。

0
投票

据我所知，真正的 HTML 解析文件不能包含其他文件。

如果您的网络服务器将解析 php，您只需将主文件的扩展名更改为 .php 并包含（）顶栏文件：

mvindex.htmlindex.php 索引.php：

include_once("topbar.html");

0
投票

使用

<!--#include file="footer_text.html" -->
html 页面内。 请查看以下网址了解详细信息。 https://www.lifewire.com/include-html-file-in-another-3469529

0
投票

您可以获取 .html 文件并使用 javascript 将其放入您的 html 中：

$(document).ready(function() {
  
    // Load the external header HTML into the page
    fetch('/html_templates/template.html')
        .then(response => response.text())
        .then(html => {
            // set contents of template to specific div
            $('#container_id').html(html);
        })
        .catch(error => console.error('Error loading template:', error)); 
    console.log("DOMContentLoaded");
});

index.html

<html>
<body>
  <script src="js/jquery-3.7.1.min.js"></script> </script>

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

您需要下载jquery（jquery-3.7.1.min.js）并将其放入文件夹/js

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.