Disable all links inside IFRAME using jQuery

Question

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.

Answer 1

I would expect that $(document).ready executes before the content of the iframe has loaded. Try using the onload attribute for the iframe instead.

Answer 2

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>

view demo

I hope this helps someone searching the net, especially since this questions pops up first on Google.

Answer 3

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.