为什么 HTML5 不包含将本地 HTML 加载到文档中的方法?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6875404/
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
Why does HTML5 not include a way of loading local HTML into the document?
提问by Matt
I've thinking about this a lot lately. Why does HTML5 not reallylet you load HTML into your document to break up your HTML files?
我最近一直在思考这个问题。为什么 HTML5不能真正让您将 HTML 加载到您的文档中以分解您的 HTML 文件?
It has support for nearlyevery other asset (images, videos, audio).
它支持几乎所有其他资产(图像、视频、音频)。
Yes we have iframes
, embeds
, and objects
but they are sandboxed and don't follow the flow of the rest of the document.
是的,我们有iframes
、embeds
和 ,objects
但它们是沙盒化的,不遵循文档其余部分的流程。
I was thinking of something like:
我在想这样的事情:
<h2>My wonderful application</h2>
<include src = "leftPane.html" type = "text/html" />
<include src = "main.html" type = "text/html" />
<include src = "footer.html" type = "text/html" />
I would love for someone to explain this to me. In nearly every web application we make, we use some form of templating to break up our HTML, so why does HTML5 not just include it?
我希望有人向我解释这一点。在我们制作的几乎每个 Web 应用程序中,我们都使用某种形式的模板来分解我们的 HTML,那么为什么 HTML5 不只包含它呢?
I'd appreciate your (flameless) thoughts.
我很欣赏你的(无焰的)想法。
Matt
马特
回答by yonran
As it turns out, this has come up in the WHATWG mailing lists: Client-side includes proposal: Shannon proposed exactly what you are saying, where the parser has to block while loading document fragments. Ian Hickson rejected it because the latency cost is too high. Besides, it's a simple feature that many web servers already provide, so it was deemed not worth the cost.
事实证明,这已经出现在 WHATWG 邮件列表中:客户端包括提议:香农提出了你所说的,解析器在加载文档片段时必须阻塞。Ian Hickson 拒绝了它,因为延迟成本太高了。此外,这是许多Web服务器已经提供的简单功能,因此被认为不值得付出代价。
You may instead want to investigate using the seamless
attribute of iframe
, which causes a full document to be placed within the document but act like any block element (inheriting styles from the host document). I don't think it's supported by many browsers yet though.
您可能希望使用 的seamless
属性iframe
进行调查,这会导致将完整文档放置在文档中,但其行为类似于任何块元素(从宿主文档继承样式)。不过,我认为许多浏览器尚不支持它。
回答by Peter
No, each request wold not require a round trip to the server, if the contents of the templates ist constant, then it can be cached and less data has to be transferred. This is the reason why you put css and javascript into seperate files.
不,每个请求都不需要到服务器的往返,如果模板的内容不变,那么它可以被缓存并且需要传输的数据更少。这就是您将 css 和 javascript 放入单独文件的原因。
回答by greenoldman
Similar question was asked and it is possible: HTML5 include file
提出了类似的问题,这是可能的:HTML5 包含文件
Rafa's answer:
拉法的回答:
Use the objecttag:
使用对象标签:
<object name="foo" type="text/html" data="foo.inc"/>
foo.inc should include valid HTML.
foo.inc 应包含有效的 HTML。
I tested it on Konqueror, Firefox and Chromium.
我在 Konqueror、Firefox 和 Chromium 上对其进行了测试。
If you find it useful (I do), please upvote Rafa answer (not mine) because "it is not possible" is spreading like disease.
如果您觉得它有用(我愿意),请为 Rafa 的回答(不是我的)点赞,因为“这是不可能的”正在像疾病一样传播。
回答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>");
}
回答by Barry Kaye
Each request would of course require a round-trip to the server - can you imagine the bandwidth issues this could cause? There would be 4 request just for your snippet above (the original page + 3 includes) and then of course the browser rendering issues and then the local JS issues (i.e. at what point is the DOM loaded - do you have 4 DOMs?).
每个请求当然都需要往返服务器 - 您能想象这可能导致的带宽问题吗?上面的代码片段将有 4 个请求(原始页面 + 3 个包含),然后当然是浏览器渲染问题,然后是本地 JS 问题(即 DOM 加载到什么时候 - 你有 4 个 DOM 吗?)。
回答by irtaza
Another way is to use jQuery and the tag
另一种方法是使用 jQuery 和标签
回答by Alex Johnson
It isn't really official yet, but it looks like Web Components, a new concept which would allow for imports similarly to how you have described, may be added to the HTML specification in the near future. It doesn't behave exactly as you asked-- as Barry Kaye pointed out this would create some issue-- but it instead takes this idea and addresses the issues.
它还不是真正的正式版本,但看起来 Web 组件是一个新概念,它允许类似于您所描述的方式进行导入,可能会在不久的将来添加到 HTML 规范中。它的行为并不完全符合您的要求——正如 Barry Kaye 指出的那样,这会产生一些问题——但它采用了这个想法并解决了这些问题。
You can see the current working draft on the concept here: http://w3c.github.io/webcomponents/spec/imports/
您可以在此处查看有关该概念的当前工作草案:http: //w3c.github.io/webcomponents/spec/imports/
And I also found this article that may be easier to understand (it was for me) here: http://www.html5rocks.com/en/tutorials/webcomponents/imports/
而且我还发现这篇文章可能更容易理解(对我来说):http: //www.html5rocks.com/en/tutorials/webcomponents/imports/
I know this is mostly a theoretical response, but then it was also a sort of theoretical question ;).
我知道这主要是一种理论上的回答,但它也是一种理论问题;)。