Html HTML5 包含文件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8401113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:50:54  来源:igfitidea点击:

HTML5 include file

html

提问by edom

What is the best way - cross browser compatible to include an HTML file in HTML5.

最好的方法是什么 - 跨浏览器兼容以在 HTML5 中包含 HTML 文件。

I am building a site in HTML5 and would like to have the nav in one separate file and included in the site pages.

我正在用 HTML5 构建一个站点,并希望将导航放在一个单独的文件中并包含在站点页面中。

回答by Rafa

Use the objecttag:

使用对象标签:

<object name="foo" type="text/html" data="foo.inc"></object>

foo.inc should include valid HTML.

foo.inc 应包含有效的 HTML。

Note: do NOT use the self-closing <object/>style. That will prevent content after the tag from being displayed.

注意:不要使用自闭式<object/>。这将阻止显示标签后的内容。

回答by edom

<object>works fine, although it is not a self-closing tag, so it should look like this (otherwise it's not valid HTML5):

<object>工作正常,虽然它不是一个自关闭标签,所以它应该是这样的(否则它不是有效的 HTML5):

<object name="foo" type="text/html" data="foo.inc"></object>

<embed>can also be used for including external html content (and any MIME type):

<embed>也可用于包含外部 html 内容(和任何 MIME 类型):

<embed type="text/html" src="foo.inc">

回答by dennis

For HTML5 you can try:

对于 HTML5,您可以尝试:

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

(https://www.html5rocks.com/en/tutorials/webcomponents/imports/)

( https://www.html5rocks.com/en/tutorials/webcomponents/imports/)

If this feature is not implemented in a target browser you can use webcomponents polyfill: http://webcomponents.org/polyfills/

如果此功能未在目标浏览器中实现,您可以使用 webcomponents polyfill:http://webcomponents.org/polyfills/

回答by Tor Valamo

The correct way is to use server side includes. The PHP solution requires PHP to be installed just for including files, the html solutions are not supported by the spec even though they work (the spec doesn't discriminate between mime types, but it does specify its intention, which means it could be explicitly prevented in the future, if those tags aren't just entirely deprecated).

正确的方法是使用服务器端包含。PHP 解决方案要求安装 PHP 仅用于包含文件,规范不支持 html 解决方案,即使它们可以工作(规范不区分 mime 类型,但它确实指定了它的意图,这意味着它可以明确将来会阻止,如果这些标签不只是完全弃用)。

Here's my post from a similar thread asking about the same thing:

这是我在一个类似帖子中提出的关于同一件事的帖子:



If your server supports SSI (server side includes) you can put the following in your html-files without needing a scripting language or whatever. Apache has SSI enabled by default (I think?)

如果您的服务器支持 SSI(服务器端包括),您可以将以下内容放入您的 html 文件中,而无需脚本语言或其他任何东西。Apache 默认启用了 SSI(我认为?)

<!--#include file="same_path_file.html" -->
<!--#include virtual="docroot_file.html" -->

"file" is relative to the current file, and probably what you would use for including related files like "relevant_article_poll.html".

“文件”是相对于当前文件的,可能是您用于包含“relevant_article_poll.html”之类的相关文件的。

"virtual" is relative to document root (ie, your website root) and you would use it for including global files, like headers and footers.

“虚拟”相对于文档根目录(即您的网站根目录),您将使用它来包含全局文件,如页眉和页脚。

Doesn't really matter which one you choose, but it's useful to know the difference between the two.

您选择哪一个并不重要,但了解两者之间的区别很有用。

Also, the include directive makes a new internal http request to the server for each file, so you could include php files and the likes and they would be executed as they should.

此外,include 指令为每个文件向服务器发出一个新的内部 http 请求,因此您可以包含 php 文件等,并且它们将按应有的方式执行。

Here's a useful overview of SSI: http://en.wikipedia.org/wiki/Server_Side_Includes

以下是 SSI 的有用概述:http: //en.wikipedia.org/wiki/Server_Side_Includes

回答by Scott Severance

If you're writing pure HTML, include files aren't possible. However, you can use Apache's server-side includes (SSI) feature, or you can use some scripting language (Python, Ruby, PHP, etc.) to assemble the pages.

如果您正在编写纯 HTML,则不可能包含文件。但是,您可以使用 Apache 的服务器端包含 (SSI) 功能,或者您可以使用某种脚本语言(Python、Ruby、PHP 等)来组装页面。

回答by d8ressa

Ok, these are all valid answers, but except the javascriptmethod the others are quite limited.

The phpone is strictly bound to the provider.
The objectand the embed, instead, include the code without any style (except if you declare it in the included file).

So I mean that's not good enought as the php or asp includewhich works fine but needs a server that supports it.

好的,这些都是有效的答案,但除了javascript方法之外,其他方法都非常有限。

PHP一个是严格绑定到供应商。
对象嵌入,而是包括没有任何风格的代码(除非您在包含文件中声明它)。

所以我的意思是这还不够好,因为php 或 asp 包含工作正常但需要一个支持它的服务器。

回答by Aaron Lee

I'm not aware of any way of doing it in HTML, but if you were to do it in PHP, it's simple enough, if you had a certain nav bar you wanted included in every page you'd just put:

我不知道有什么方法可以用 HTML 来做,但是如果你用 PHP 来做,那就很简单了,如果你有一个特定的导航栏,你想包含在你刚刚放置的每个页面中:

<?php include('nav.php') ?>

Putting the HTML code in a seperate page for the nav, and the PHP would automatically slam it in there each time. And you don't have to know PHP to make PHP pages per se, you can just use general HTML markup in a PHP file and it'll work fine.

将 HTML 代码放在单独的导航页面中,PHP 每次都会自动将其放入其中。而且您不必了解 PHP 本身就可以制作 PHP 页面,您只需在 PHP 文件中使用一般的 HTML 标记就可以了。

回答by Goa

HTML5 is made out of 3 components: HTML, CSS and JavaScript. So we have to use all of them to take advantage of HTML5.

HTML5 由 3 个组件组成:HTML、CSS 和 JavaScript。所以我们必须使用所有这些来利用 HTML5。

External HTML code can be included in another html document using javascript. The only thing is, you have to store external code in .js file. Here is an example how to include html paragraph:

可以使用 javascript 将外部 HTML 代码包含在另一个 html 文档中。唯一的问题是,您必须将外部代码存储在 .js 文件中。以下是如何包含 html 段落的示例:

<!DOCTYPE html>
<html>
    <head>
    <title>Main Page</title>
        <script type="text/javascript" src="include_html.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            paragraph();
        </script>
    </body>
</html> 

Contents of include_html.js

include_html.js 的内容

function paragraph()
{
        document.write("<p> This is an HTML paragraph </p>");
}