I want to disable all links inside an IFRAME, when people click on those link, alert would popup.
Here is what I have so far, but the jQuery does nothing. Not sure what I did wrong.
<iframe id='templateframe' name='templateframe' src="templates/template<?php echo $templateID; ?>/login.html"></iframe>
$(document).ready(function(){
$('#templateframe').contents().find('a').click(function(event) {
alert("demo only");
event.preventDefault();
});
});
Thanks in advance.
I was looking to disable iframe links too and couldn't find a solution. Thanks to HTML5, you can easily disable links by simply adding the sandbox attribute.
<iframe src="externalsite.com" sandbox></iframe>
I hope this helps someone searching the net, especially since this questions pops up first on Google.
The solution mentioned by "lol" actually works quite well. I stumbled on this accidentally after working on this for a couple of hours...
Put your iframe inside a div element, then make the div transparent and push the z-index of the iframe behind the div. See this example:
<div class="container">
<iframe class="lockframe" src="www.google.com"></iframe>
</div>
Then set up your css like this:
div.container { background: transparent; }
iframe.lockframe { z-index: -2; }
Load up your page and the div is what will accept the click events, not the iframe.
The content policy security CSP must be validated in the frame-ancestors attribute, since according to the security policy that the site has, the javascript or jquery will not work if the iframe points to a site outside the domain, the second thing to correct is add an onclick method that captures the link type elements "a href" and returns false when clicked, that way it will not execute, otherwise change it to event.preventdefault so that it does not execute the link action by default. The simple solution is to add the sandbox attribute to the iframe without value, or failing that it does not have the value "allow-popups" so pages will not open in another window when the iframe is clicked.