HTML Embedding Using <iframe>
Introduction
In some scenarios, we would like to embed one HTML web page into another. For example, I would like to insert something non-static from other sources to my static personal website. In this case, we would have to use the <iframe> HTML tag.
Examples
World Wide Web Project
The World Wide Web (WWW) project website is the first website that was ever created. In this example, we embedded the WWW project website into my personal website.
In the HTML, we added the following line of code.
1 | <iframe src="http://info.cern.ch/hypertext/WWW/TheProject.html" width="100%" height="400" style="border:1px solid black;"> |
Then we could try viewing the WWW project website from my personal website.
However, the HTTPS protocol prevented the loading of a HTTP web page over HTTPS and my personal website is using HTTPS protocol.
1 | Mixed Content: The page at 'https://leimao.github.io/blog/HTML-Embedding-Using-iframe/' was loaded over HTTPS, but requested an insecure frame 'http://info.cern.ch/hypertext/WWW/TheProject.html'. This request has been blocked; the content must be served over HTTPS. |
Yahoo!
Some websites, such as Yahoo! does not allow their web pages to be embedded in another HTML web page at all via some mechanisms.
ACME Laboratories
The old ACME Laboratories website using HTTPS protocol is loaded fine.
Caveats
Sometimes, missing trailing slashes in the URL will cause HTML embedding mixed content problems as well.
References
HTML Embedding Using <iframe>