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.