将一个 HTML 文件插入另一个 HTML 文件[重复]
Posted
技术标签:
【中文标题】将一个 HTML 文件插入另一个 HTML 文件[重复]【英文标题】：Insert one HTML file into another HTML file [duplicate] 【发布时间】：2014-01-19 00:52:38 【问题描述】：我正在制作一个巨大的网站，所有页面上都有一个导航栏。 是否可以在 .html 文件中创建导航栏并将其导入所有其他页面， 如果有，怎么做？
【问题讨论】：
你是用 php.ini 做的吗？如果是，则创建一个 header.php 并将其包含在您的所有页面中，例如 include 'header.php' 是的，如果您使用的是 php，请使用 include 关键字。 这不是一个免费的做你的工作-网站。表现出一些努力。 不能单独使用 HTML，但可以使用 javascript (jquery) "是否可以在 .html 文件中创建导航栏并将其导入所有其他页面" OP 不知道术语服务器端包含，他们只知道他们想要什么，即服务器端包括。 【参考方案1】：1) 在 html 中，我们可以使用 iframe
将其他文件加载到一个 html 文件中<!DOCTYPE html>
<html>
<body>
<iframe src="header.html">
<p> display</p>
</iframe>
</body>
</html>
2）我们可以使用jquery函数将文件加载到某个特定的div中。
<script>
$(function()
$('#header').load("header.html");
);
</script>
3) 使用其他语言，例如 php 、 .net 我们为此使用 php include 和 require
**Apart from using iframe there is no other way in html that we can include one html file to another.**
【讨论】：
【参考方案2】：使用 PHP 是可能的，但您必须将文件更改为 .php 文件。
把它放在主文件中：
<?php
include("navbar.php");
?>
我不知道 HTML 的好方法
【讨论】：
我会改成 php 比，如果那是唯一的 good 选项.. 谢谢 :)【参考方案3】：您可以单独使用 HTML 完成此操作，使用 Server Side Includes。最简单的例子：
index.html
<html><head><title>Test</title></head>
<body>
<!--#include file="navbar.shtml" -->
</body>
</html>
navbar.shtml
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
您永远不应该使用框架集或 iframe 来执行此操作。 https://***.com/a/15938545/822711
请注意，这不适用于file:// 协议，它需要在网络服务器上运行，就像在实时环境中一样。这可以在私人或公共服务器上，或者使用在您的计算机上运行的服务器（例如 wamp）的 localhost。
【讨论】：
您发布的链接是指框架，而不是 HTML 标记<iframe>。虽然不理想，但对于一个简单的网站来说并不是那么糟糕。
对不起，无论多么简单，使用任何类型的框架来加载导航对于任何网站都是一个可怕的想法。
在给出这个答案之前你检查过吗？请给出一个完整的例子。你的代码不起作用！
@user3085661 我的代码在哪里不起作用？在您的本地主机上？在某个随机服务器上？你读过维基吗？您的服务器是否设置为识别 SSI？ “不工作”不是对问题的有效描述
@user3085661 最好的猜测是您在以file:// 身份打开页面时尝试运行服务器端 代码。我已经相应地更新了我的答案。谢谢。【参考方案4】：
我更喜欢尝试使用Jquery，就像
<!doctype html>
<html>
<head>
<title>Home page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function()
$('.header').load("header.html");
);
</script>
</head>
<body>
<div class="header"></div>
</body>
</html>
在同一个文件夹中打开一个名为header.html的文件。同样的东西你可以申请页脚。
【讨论】：
如您所知，建议使用 jQuery 做一些可以在根级别轻松完成的简单操作的答案通常会被标记。 在哪里建议？这是我知道的答案，为什么我不回答？ 你正在引入一个客户端框架来做一些很容易在服务器端实现的事情，并且在服务器端做得更好。没有 FOUC，没有额外的页面加载，没有额外的框架。 如果他想在服务器端转换它，他必须转换文件类型，如.php等。在这里，没有这个小代码他不需要改变任何东西。 "如果他想在服务器端转换它，他必须转换文件类型，比如 .php" 不，他/她没有。 HTML 可以包含在 HTML 中。【参考方案5】：为此，如果您使用 PHP，则需要添加服务器端语言，您可以创建一个 nav.php 文件。在此文件中，您可以添加导航的完整 HTML，您可以 在您的代码中包含这个 PHP 文件，而不是放置导航 HTML。 像这样
<?php include("nav.php");?>
【讨论】：
格式化。从来没有提到过 PHP。 你为什么要对代码标签给出完整的答案？！ 我提到了 .php 扩展名。@Shadow Wizard 有没有办法在 HTML 中包含文件？ @RizwanSultan 还有其他服务器端语言，不仅仅是 PHP。此外，您的整个答案只是不可读的代码块，应该格式化正确的答案。我会自己做，但如果你不愿意自己花那么一点点额外的努力去做，那就没有意义了。 @Shadow Wizard 感谢好友，现在我添加了更多细节，在 *** 中格式化有点混乱我刚开始使用它。但希望我会学习格式化标准。以上是关于将一个 HTML 文件插入另一个 HTML 文件[重复]的主要内容，如果未能解决你的问题，请参考以下文章
尝试使用Javascript将HTML元素插入另一个HTML元素
如何从我的 html 文件移动到另一个 html 文件以创建 iOS 混合应用程序？