Disable all links inside IFRAME using jQuery

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').c开发者_运维问答lick(function(event) {
            alert("demo only");

            event.preventDefault();

        }); 
});

Thanks in advance.

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

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.

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.

Or else you could put the script inside the iframe itself and thus shortening the code to this way. It makes it a lighter performance I believe.

$(document).ready(function(){       
    $('a').click(function(event) {
        alert("demo only");
        event.preventDefault();
    }); 
});

A legend over at

http://www.webdeveloper.com/forum/showthread.php?182260-Can-we-disable-links-inside-iframes

revived a technique from the good old days, back when we didn't have calls like -webkit-gradient().

Just put a transparent div over it!

None of the above answers will work unless maybe you are loading the content locally because by the time the window.load event fires the iframe hasn't typically loaded yet. You can add a listener to the iframe to find all a's inside the iframe and disable them.

$("iframe").load(function() {
    $("iframe").contents().find("a").each(function(index) {
        $(this).on("click", function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    });
});

This is the generic solution of your problem. Hope this will work well.

$(window).load(function(){
    $('#templateframe').contents().find('a').click(function(event) {
        alert("demo only");
        event.preventDefault();
    }); 
});

I think none of the proposed solutions (other than the html5 sandbox) will work if you have not set Access-Control-Allow-Origin on the source server. To solve this problem, in some cases one can use a proxy server, retrieve the content of the page on another server, parse the html code, get rid of the links, and return the result to the client's browser.

As an alternative to preventing default you can change anchors to spans so it is more visible that link is not link anymore.

$('#templateframe').contents().find('a').each(function() {
    $(this).replaceWith($('<span>' + this.innerHTML + '</span>'));
});