CODEWITHSUNDEEP
jquery
Shadow_boi
Shadow_boi

Reputation: 2198

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').click(function(event) {
            alert("demo only");

            event.preventDefault();

        }); 
});

Thanks in advance.

Upvotes: 27

Views: 56897

Answers (9)

Zoccadoum
Zoccadoum

Reputation: 872

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.

Upvotes: 12

lol
lol

Reputation: 4210

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!

Upvotes: 9

lilsizzo
lilsizzo

Reputation: 366

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();
    }); 
});

Upvotes: 11

1man
1man

Reputation: 5654

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.

Upvotes: 3

JJJ
JJJ

Reputation: 3352

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.

Upvotes: 15

Steven Bennett
Steven Bennett

Reputation: 96

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();
        });
    });
});

Upvotes: 7

Bula
Bula

Reputation: 1586

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>'));
});

Upvotes: 0

Abdullah Kiser
Abdullah Kiser

Reputation: 31

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();
    }); 
});

Upvotes: 3

Mads Mogensh&#248;j
Mads Mogensh&#248;j

Reputation: 2068

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

Upvotes: 17

Related Questions