问题
I've thinking about this a lot lately. Why does HTML5 not really let you load HTML into your document to break up your HTML files?
It has support for nearly every 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.
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?
I'd appreciate your (flameless) thoughts.
Matt
回答1:
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.
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.
回答2:
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.
回答3:
Similar question was asked and it is possible: HTML5 include file
Rafa's answer:
Use the object tag:
<object name="foo" type="text/html" data="foo.inc"/>
foo.inc should include valid HTML.
I tested it on Konqueror, Firefox and Chromium.
If you find it useful (I do), please upvote Rafa answer (not mine) because "it is not possible" is spreading like disease.
回答4:
HTML5 is made out of 3 components: HTML, CSS and JavaScript. So we have to use all of them to take advantage of 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:
<!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
function paragraph()
{
document.write("<p> This is an HTML paragraph </p>");
}
回答5:
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?).
回答6:
Another way is to use jQuery and the tag
http://irtazaali.wordpress.com/2013/01/16/how-to-include-html-text-from-another-file-into-an-html5-page/
回答7:
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.
You can see the current working draft on the concept here: 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/
I know this is mostly a theoretical response, but then it was also a sort of theoretical question ;).
来源：https://stackoverflow.com/questions/6875404/why-does-html5-not-include-a-way-of-loading-local-html-into-the-document