Menu
I have a page with a large iframe that contains a majority of the content. The user interacts with the website by clicking around within the iframe. The functionality I'm trying to build is: When a user navigates away from my site, I do them a favor and bust out of the iframe.
The iframe has an onload event which is fired every time a new page is loaded, cross-domain or not.
<iframe id="testframe" src="http://mysite.com" onload="testframe_loaded()"></iframe>
Each time the event is fired, I'm looking for some way to:
A) Detect when the user navigates to a different domain
B) Bust out of the iframe.
I suspect that B isn't possible, since browsers don't give access to
document.getElementById("testframe").contentDocument.location.href
when the iframe is cross-domain. I'm also not sure whether or not A is possible.
If anybody has ideas as to how to accomplish this, or is positive that it can't be done, I'd appreciate the advice.
Thanks
574
to select the iframe with querySelector . Then we define the canAccessIFrame function that checks if the iframe has the contentDocument property defined. If it's defined then it's not a cross-domain iframe or it's cross domain and cross domain is allowed. Otherwise, false is returned.
To access cross-domain iframe, the best approach is to use Javascript's postMessage() method. This method provides a way to securely pass messages across domains.
Web applications that take a dependency on the cross-domain iframe are required to get IT Admin approval for their domain. Administrators will add the source domain of your web application to the company's list of allowed domains.
To check if iframe is loaded or it has a content with JavaScript, we can set the iframe's onload property to a function that runs when the iframe is loaded. document. querySelector("iframe"). onload = () => { console.
You can do A, since if you get a security error (which you can catch), that's means they're cross-domain :) Then you can resize the iframe to be the whole page. But I think you're right you can't actually bust out, without explicit cooperation from the other domain.
EDIT: You're right you don't need to poll. Here's the basic code:
<html>
<head>
<title>Cross-domain frame test</title>
<!-- http://stackoverflow.com/questions/2365822/detect-when-iframe-is-cross-domain-then-bust-out-of-it/2365853#2365853 -->
<script type="text/javascript">
function checkForCross()
{
var iframe = document.getElementById("myFrame");
try
{
var loc = iframe.contentDocument.location.href;
} catch(e)
{
iframe.setAttribute("style", "border: 0; margin: 0; padding: 0; height: 100%; width: 100%;");
}
}
</script>
</head>
<body>
<iframe name="myFrame" id="myFrame" src="child.html" style="height: 50%; width: 50%;" onload="checkForCross()"></iframe>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
