等价于 HTML 中的 include()

Posted

技术标签:

【中文标题】等价于 HTML 中的 include()【英文标题】:Equivalent of include() in HTML 【发布时间】:2011-04-25 02:34:56 【问题描述】:

我想知道是否有一种方法可以仅使用 html 将一些 html 内容包含在另一个 html 中?

php 的替代品

<?php include("file.php"); ?>

这可能吗?

编辑:

这引起了一些混乱,我需要的是“几乎是一个 html 标签”,它具有将 html 文档包含在另一个文档中的功能。

【问题讨论】:

@Trufa 我相信他在谈论 iframe 的 HTML5 seamless 属性(html.spec.whatwg.org/#attr-iframe-seamless),但目前对它的支持相当惨淡:caniuse.com/#feat=iframe-seamless iframe seamless 是规范中的 removed。真可惜。 【参考方案1】:

差不多10年过去了,可能还有人对此心存疑虑。因此,我将解释我们在 2020 年今天拥有的一个简单解决方案。

我总是使用 jquery .load() 函数,从来没有遇到过问题。

Exemple: ( "#content" ).load( "includes/menu.html" );

【讨论】:

如果 HTML 文件位于防火墙内的另一台服务器上怎么办?换句话说,由我们控制的内容服务器。【参考方案2】:

Html 中缺少 Include\Import 真是令人沮丧!

如果不支持“PHP”,一个不错的选择是“服务器端包含 (SSI)”!

几乎所有(如果不是全部)网络主机服务器都支持 SSI!

<!--#include virtual="layout.html" -->

包含上述行的文件必须以“.shtml”或“.shtm”扩展名结尾!


浏览器本身无法执行 Include\Import 这样简单的操作,这真的很烦人!

与 php 或 Node.js 一样,任何浏览器都应该支持在 HTML 加载过程开始之前使用 javascript 本身对 html 进行预处理!

【讨论】:

【参考方案3】:

你试过了吗:

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

【讨论】:

非常好,但我发现至少有一个陷阱:至少在 chrome 中,单击对象框架内的链接默认情况下会打开对象内部的新链接,而不是在浏览器中。在包含的文件中将链接目标设置为 target="_top" 是一种可能的解决方法。 另外需要说明的是JS和CSS文件需要在主页面和被调用的html文件中调用两次【参考方案4】:

我写的一个库的无耻插件解决了这个问题。

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

上面将取/path/to/include.html的内容并用它替换div

【讨论】:

谢谢。看起来像最终的解决方案!但是当我在本地(不是在 FTP 上)加载文件时,我从 Firefox 收到一个错误:跨域请求被阻止:同源策略不允许读取 file:////_topmenu2.html 处的远程资源。 (原因:CORS 请求不是 http)。 ​【参考方案5】:

这可能晚了几年,但我就是这样做的!

在第一行之后放这一行!

<SCRIPT LANGUAGE="JavaScript" src="http://yourdomain.com/header.js">

然后创建一个名为“header.js”的文件并输入您要包含的文件的内容! 就这样……

<!-- Begin
document.write('<center>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<hr>');
document.write('</center>');
// End -->

希望有帮助!

【讨论】:

一个缺点是没有启用 JavaScript 的用户将看不到这样写的内容。目前包括搜索引擎爬虫,因此内容不会出现在搜索引擎中。 好吧... thnx 没想到! t 不知道为什么会有这么多反对意见。它和这里的大多数解决方案一样好。【参考方案6】:

HTML 没有原生包含附加内容的功能。然而,大多数 Web 服务器确实有服务器端包含语句:SSI in Apache SSI in IIS

【讨论】:

【参考方案7】:

如果你使用的是 Apache,你可以试试Server Side Includes

【讨论】:

【参考方案8】:

它不能纯粹由 HTML 来完成。 (但是有 iframe,但我认为在这种情况下不符合条件。)

这可以使用 JavaScript 来完成。您通过 Ajax 获取另一个文件,并将其内容放在当前页面上的 HTML 元素中。

【讨论】:

我非常有限,我实际上是在 facebook 中要求 fmbl 标签页。【参考方案9】:

唯一的就是一个纯 html 的 iframe。但您也可以使用 javascript 通过 ajax 获取页面并将其包含到您的 dom 层次结构中

【讨论】:

【参考方案10】:

是的,但您需要在您的配置或 .htaccess 中启用它:

Options +Includes
AddType text/html .shtml
AddHandler server-parsed .shtml

当然,您需要将任何包含以下内容的文件重命名为 .shtml... 或者您可以直接使用:

Options +Includes
AddType text/html .html
AddHandler server-parsed .html

语法本身类似于注释:

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

【讨论】:

不,但它也不需要像 PHP 这样的东西。 这是一个服务器端包含,而不是纯 HTML。使用 JavaScript 可能同样容易,甚至更容易。 @tyler: 除了你正在移动客户端并生成一堆额外的请求...... 但它确实需要其他东西!那为什么不使用PHP呢? @Col Shrpel:好吧,我也会使用 php,但关键是它本质上是内置于 Apache 和 IIS 中的,因此它不需要安装第 3 方模块。那将是唯一的原因。但实际上,谁没有安装 PHP?这对我来说也没有意义......但我没有问这个问题:-)【参考方案11】:

没有这样的事情。您必须使用服务器端脚本语言或 JavaScript 来执行此类操作。

【讨论】:

以上是关于等价于 HTML 中的 include()的主要内容,如果未能解决你的问题,请参考以下文章

luogu P1446 [HNOI2008]Cards

恩位运算x

JPA 中的 @Any 等价于啥?

等价于 protobuf 中的 #ifdef 语法

等价于 JavaScript 中的 continue 语句

等价于 NSFont 中的 UIFont .withSize