Using HTML import to load entire HTML page inside a DIV
Question
We have a HTML page that acts as gateway to multiple applications. The site has few buttons and an IFRAME. On click of button, we load other HTML pages inside the IFRMAE. All this is working fine. But we want to utilize HTML import/web components while supporting IE 11 to achieve same. I want to localize the scope of this HTML page we are importing so that it does not interfere with existing application.
How can we achieve this? Are there any downside to this approach.
This what we currently have.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Test</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#btnAbout").click(function () {
document.getElementById('iframe').src = "about.html";
});
$("#btnContact").click(function () { $("#iframe").attr("src", "contact.html") });
$("#btnApple").click(function () {
document.getElementById('iframe').src = "https://www.Apple.com/";
});
});
</script>
<style>
body {
height: 96vh;
padding: 0;
}
</style>
</head>
<body style="border: 1px;border-style: dashed; color: brown;">
<div>
<input type="button" value="Yahoo" id="btnAbout" />
<input type="button" value="MS" id="btnContact" />
<input type="button" value="Apple" id="btnApple" />
</div>
<iframe id="iframe" width="100%" height="96%"></iframe>
</body>
</html>
About.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title> About</title>
</head>
<body>
<div style="border-style: dotted; color: crimson; height: 1000px;">
this is a div
</div>
</body>
</html>
User.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
</head>
<body>
<div>
user page
</div>
</body>
</html>
Contact.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
</head>
<body>
<div>
this is content page
</div>
</body>
</html>
1 answers
solution1
0 2020-04-28 09:41:28
The biggest downside is that most major browsers no longer support HTML imports.
Source: https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports
Alternative and supported solutions are as follows:
- embed content using iFrames
- load content using ajax
- use php includes
All of the above will work just fine with IE11, though I would dump IE11 support altogether.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.