I have the following which opens an iframe with HTML page loaded. It works great, but how to add a close button to the page/iframe so it simply closes the iframe/page and does not affect the page it's opened over?
(function (d) {
var modal = document.createElement('iframe');
modal.setAttribute('src', 'mypage.html'));
modal.setAttribute('scrolling', 'no');
modal.className = 'modal';document.body.appendChild(modal);
var c = document.createElement('link');
c.type = 'text/css';
c.rel = 'stylesheet';
c.href = '//myurl/testes.css';
document.body.appendChild(c);
}(document));
I tried the following which tried to close it, but, then gives a 404 message inside the iframe:
<a href="window.parent.document.getElementById('iframe').parentNode.removeChild(window.parent.document.getElementById('iframe'))">Close</a>
I am loading jquery on the page if that helps at all, meaning, if there is a jquery solution.
I have the following which opens an iframe with HTML page loaded. It works great, but how to add a close button to the page/iframe so it simply closes the iframe/page and does not affect the page it's opened over?
(function (d) {
var modal = document.createElement('iframe');
modal.setAttribute('src', 'mypage.html'));
modal.setAttribute('scrolling', 'no');
modal.className = 'modal';document.body.appendChild(modal);
var c = document.createElement('link');
c.type = 'text/css';
c.rel = 'stylesheet';
c.href = '//myurl./testes.css';
document.body.appendChild(c);
}(document));
I tried the following which tried to close it, but, then gives a 404 message inside the iframe:
<a href="window.parent.document.getElementById('iframe').parentNode.removeChild(window.parent.document.getElementById('iframe'))">Close</a>
I am loading jquery on the page if that helps at all, meaning, if there is a jquery solution.
Share Improve this question edited Mar 31 at 16:53 isherwood 61.2k16 gold badges121 silver badges170 bronze badges asked Aug 2, 2012 at 10:19 StudioTimeStudioTime 24.1k40 gold badges128 silver badges215 bronze badges3 Answers
Reset to default 3Links are supposed to link somewhere and the href attribute takes a URI.
Use a <button type="button"> and bind a click handler to it. (You could use an onclick attribute, but that wouldn't be unobtrusive)
The unobtrusive approach would be:
<a href="someUriWithoutAnIframe" target="_parent">foo</a>
And then bind an event handler along the lines of
myLink.addEventListener('click', function (e) {
var d = window.parent.document;
var frame = d.getElementById('myFrame');
frame.parentNode.removeChild(frame);
e.preventDefault();
});
You could put the link into some kind of container div for your iframe, creating the latter with this structure:
<div id="iframe-container">
<a href='#' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>Close</a>
<iframe src="http://some.web/page.html" />
</div>
Works without any framework.
Change the scripts in the pages as follows. On the main page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div onclick="displayIframe();">Show Iframe</div>
<script>
var displayIframe = function (){
var modal = document.createElement('iframe');
modal.setAttribute('src', 'myIframe.html');
modal.setAttribute('scrolling', 'no');
modal.className = 'modal';
document.body.appendChild(modal);
var c = document.createElement('link');
c.type = 'text/css';
c.rel = 'stylesheet';
c.href = '//myurl./testes.css';
document.body.appendChild(c);
}
window.addEventListener("message", function(event) {
if (event.data === "closeIframe") {
document.querySelector('.modal').remove();
}
});
</script>
</body>
</html>
and in iframe page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body id="body">
<button onclick="closeParentIframe()">Close</button>
<script>
function closeParentIframe() {
window.parent.postMessage("closeIframe", "*");
}
</script>
</body>
</html>