You can do this by calling parent.window.close() from the document in the iframe. There is one requirement for this to be seamless to the user and cross-browser capable: The popup window containing the iframe must have been opened with a javascript command --
window.open('popup.htm','_blank','height=400,width=400');
If the popup is opened with a hyperlink (
<a href="popup.htm" target="_blank">More info</a>
) then the close function doesn't work predictably (IE throws a warning dialog, Firefox ignores it silently...)
You can test the code with two files: popup.htm and iframe.htm.
popup.htm (the document containing the iframe)
<html><head><title>iframe closer</title></head>
<script language="javascript" type="text/javascript" >
function openpopup(){
var popper=window.open('popup.htm','_blank','width=400,height=400');
popper.focus();
}
</script>
<body>
<iframe src="iframe.htm" width="200" height="200" style="border:solid 1px #990000;"></iframe>
<p onclick="openpopup();" style="color:#ff0000;cursor:pointer;text-decoration:underline;">Open Popup using JavaScript</p>
</body></html></html>
and iframe.htm (the document displayed in the iframe:
<html><head><title>iframe closer</title>
</head><body>
<p>
<input type="button" onclick="parent.window.close();" value="Close [x]" />
</p>
</body></html>
</html>
Open popup.htm in your browser, click the button, and you'll see the problem. Click the red paragraph and you can test the close() function on a javascript-opened popup window (it'll work).