在另一个 html 文件中包含 html [重复]
Posted
技术标签:
【中文标题】在另一个 html 文件中包含 html [重复]【英文标题】:Include html in another html file [duplicate] 【发布时间】:2016-12-14 17:42:46 【问题描述】:我有一个 html“head”模板和一个导航模板,我想将它们包含在我网站的所有其他 html 文件中。 我找到了这篇文章:
Include another HTML file in a HTML file
我的问题是......如果我想包含标题怎么办?
例如,我有以下文件结构:
/var/www/includes/templates/header.html
navigation.html
header.html 可能如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Test Portal</title>
</head>
在这种情况下,我仍然可以按照其他帖子中的示例创建一个 div 并通过 jquery 填充该 div 吗?
【问题讨论】:
我不明白为什么它不应该像您提供的链接中描述的那样工作。 【参考方案1】:方法一:
我认为最好的方法是使用 jQuery 将 html 内容/文件包含到另一个 html 文件中。
您可以简单地包含 jQuery.js 并使用 $("#DivContent").load("yourFile.html");
加载 HTML 文件
例如
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function()
$("#DivContent").load("another_file.html");
);
</script>
</head>
<body>
<div id="DivContent"></div>
</body>
</html>
方法二:
没有可用于包含文件的此类标签,但有一些第三方方法可用,如下所示:
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
方法三:
有些人还使用了服务器端包含 (SSI):
<!--#include virtual="a.html" -->
【讨论】:
似乎对我有用 方法2好像改了,这里是最新文档的链接w3schools.com/w3js/w3js_html_include.asp。 @mattruma,可能,我给出这个答案已经 3 年了。正如我所说,方法 2 只是第三方插件/方法.. 我认为#3 是 C++ 并且我的网络服务器不支持 (?),而且我不是 #2 的粉丝,包括一个额外的.js
仅用于一个功能,但 #1 效果很好对我来说......一旦我added a callback,代码执行将在文件完全加载之前不会继续(因为我需要立即与加载的元素进行交互)。【参考方案2】:
使用<object>
标签:
<object data="filename.html"></object>
【讨论】:
太棒了!干净简单。 它在body
标签中显示了一个可滚动的窗口,由html
标签包围,带有head
,因此它创建了一个新的dom
。
不错!然而,一个小限制是,主机页面的 CSS 样式不适用于插入的 HTML 文本(至少对于 Chromium 87.0/Ubuntu 20 上的我来说不是)。除非样式包含在导入的文本中。
它不起作用,它启动了一个 Flash emualtor【参考方案3】:
我需要包含许多文件。所以我创建了以下脚本:
<script>
$(function()
$('[id$="-include"]').each(function (e)
$(this).load("includes\\" + $(this).attr("id").replace("-include", "") + ".html");
);
);
</script>
例如,使用 div 为插入放置一个占位符。
<div id="example-include"></div>
为我需要包含的所有文件创建了“包含”文件夹。创建文件“example.html”。 它适用于任意数量的包含。您只需使用命名约定并将所有包含的文件放在正确的文件夹中。
【讨论】:
【参考方案4】:使用 HTML 标签。
我遇到过类似的问题,然后我用了
iframe src = "b.html" >
【讨论】:
这是基于原始 html 的解决方案,不需要依赖 Jquery。 @Akash 谢谢【参考方案5】:对于任何对 Web 组件方法感兴趣的人:
<html-include src="my-html.html"></html-include>
以及对应的JS:
class HTMLInclude extends HTMLElement
constructor()
super();
this.innerHTML = "Loading...";
this.loadContent();
async loadContent()
const source = this.getAttribute("src");
if (!source)
throw new Error("No src attribute given.");
const response = await fetch(source);
if (response.status !== 200)
throw new Error(`Could not load resource: $source`);
const content = await response.text();
this.innerHTML = content;
window.customElements.define("html-include", HTMLInclude);
请注意,可以使用影子 DOM 做一些好事,以确保加载内容的样式不会影响外部页面。
上面的代码是非常“现代”的 JS,你可能不想在没有一些 polyfills/babel 转译的情况下直接使用上面的代码。
【讨论】:
如何查询my-html.html中的一些元素?我无法查询该文件中的元素,因为当我们查询时,它不会出现在 DOM 中【参考方案6】:这类似于另一种自定义标签解决方案,但这个解决方案使用开始和结束标签之间的文本作为包含路径/url。另一种解决方案使用src
属性。
<html-include> ./partials/toolbar.html </html-include>
元素实现有点棘手:
# -- ./js/html-include.js --
class HTMLInclude extends HTMLElement
constructor(src)
super();
this.attachShadow(mode: "open");
if (src)
this.textContent = src;
setTimeout(() => this._load());
async _load()
let src = this.textContent.trim();
if (!src)
throw new Error("URL missing between <html-import> tags.");
let rsp = await fetch(src);
if (rsp.status != 200)
throw new Error(`Failed to load file ($src) for <html-import>.`);
this.shadowRoot.innerHTML = await rsp.text();
customElements.define("html-include", HTMLInclude);
setTimeout()
是必要的,因为如果过早访问 this.textContent
,可能会包含页面的所有前面文本(在 Chrome/Chromium 上可见)。推迟访问修复。
这是合并到页面中的样子:
<html>
<head>
<link rel="stylesheet" href="./css/index.css">
<script type="text/javascript" src="./js/html-include.js"></script>
</head>
<body>
<html-include> ./partials/toolbar.html </html-include>
<html-include> ./partials/side-menu.html </html-include>
<html-include> ./partials/statusbar.html </html-include>
</body>
</html>
CSS 样式应正确应用于新导入的 HTML。
这个元素也可以通过将 URL 传递给导入文件来从 JS 创建。
let wgthost = document.getElementById("tgt");
wgthost.appendChild(new HTMLInclude("./partials/mywidget.html"));
【讨论】:
以上是关于在另一个 html 文件中包含 html [重复]的主要内容,如果未能解决你的问题,请参考以下文章