1

I am looking for a simple way to make my website modular and extract common parts that appear often like header and footer into separate files.

In my case, I can not use any server-side includes with e.g. PHP. I also generally would like to avoid including big libraries like JQuery just for such a simple task.

Now I came across https://stackoverflow.com/a/691059/4464570 which suggests to simply use an HTML <object> tag to include another HTML file into a page, like this:

<object data="parts/header.html" type="text/html">header goes here</object>

I might be missing something important here, but to me this way seems to perfectly fit my needs. It is very short and precise, the <object> tag is well supported by all browsers, I don't need to include any big libraries and actually I don't even need any JavaScript, which allows users blocking that to still view the correct page structure and layout.

So are there any disadvantages I'm currently not aware of yet with this approach? The main reason for my doubts is that out of dozens of answers on how to include HTML fragments, only one recommended <object> while all others went for a PHP or JavaScript/JQuery way.

Furthermore, do I have to pay attention to anything special regarding how to put the <object> tag into my main page, or regarding the structure of the file I want to include this way? Like, may the embedded file be a complete HTML document with <!DOCTYPE>, <html>, <head> and <body> or should/must I strip all those structures and leave only the inner HTML elements? Is there anything special about using JavaScript or CSS inside HTML embedded this way?

The use of the <object> tag for HTML content is very similar to the use of an <iframe>. Both just load a webpage as a seperate document inside a frame that itself is the child of your main document.

Frames used to be very popular in the early days of web development, then in the form of the <frame> tag. They are generally frowned upon, however, and you should really use them as little as possible.

Why not to use this technique for displaying your own content

The HTML content in the child frame cannot communicate with the parent. For example, you can't use a script in the parent HTML to communicate with the child and vice versa. That makes it not very useful for serving your own content when you want to display anything but static text.

Why not to use this technique for displaying someone else's content

You can't use it to serve a lot of external content either. Many websites (including eg. SO) send an X-Frame-Options header along with their webpage that has the value SAMEORIGIN. This prevents your content from being loaded and displayed.

4

1 回答 1

3

HTML 内容标签的使用<object>与<iframe>. 两者都只是将网页作为单独的文档加载到框架内，该框架本身就是主文档的子级。

框架在 Web 开发的早期非常流行，然后以<frame>标签的形式出现。但是，它们通常不受欢迎，您应该尽可能少地使用它们。

为什么不使用这种技术来显示您自己的内容

子框架中的 HTML 内容无法与父框架通信。例如，您不能使用父 HTML 中的脚本与子 HTML 进行通信，反之亦然。当您想要显示除静态文本之外的任何内容时，这使得它对于提供您自己的内容不是很有用。

为什么不使用这种技术来显示其他人的内容

您也不能使用它来提供大量外部内容。X-Frame-Options许多网站（包括例如 SO）在其网页中发送一个带有 value 的标头SAMEORIGIN。这可以防止您的内容被加载和显示。

于 2017-07-15T12:25:13.847 回答