27

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.

1
  • Well, this shouldn't be restricted by browser security.
    – Anonymous
    Jan 24, 2011 at 0:55

9 Answers 9

17

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

0
16

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.

4
  • 2
    But if you need to use sandbox="allow-scripts", the links are enable again. That would be nice if you could allow javascript for animations, etc. but disable the links. Feb 25, 2015 at 21:30
  • As per my observation, sandbox attribute blocks all links except the one with phone numbers, like: <a href="tel://1-123-456-7890">123.456.7890</a>. Example: jsbin.com/bacukifudu/1/edit?html,output Oct 13, 2015 at 18:06
  • 9
    This is not correct. Your example is flawed. The links at www.paypal-gifts.com/us/giftcardlist/ aren't links at all, but instead javascript functions that change the location. sandbox will stop scripts from executing, but doesn't disable HTML anchors.
    – None
    Jan 5, 2017 at 19:24
  • Its also not working for href="mailto:xyz@_.com" link May 28, 2020 at 8:49
12

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.

0
11

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

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!

3
  • and what if i want to scroll the inner content of iframe?
    – Karolis.sh
    Oct 29, 2014 at 15:04
  • nope, we used this from more of a "the designers want this" point of view which needed a "window to another website" which couldn't be interacted with. Scrolling isn't possible - soz about that one!
    – lol
    Oct 30, 2014 at 2:17
  • ahh, we're facing the same issue, except designers also want scrolling
    – Karolis.sh
    Oct 30, 2014 at 7:33
7

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();
        });
    });
});
2
  • 1
    does this work for content loaded from a different domain? is browser security an issue here?
    – lol
    Dec 13, 2013 at 23:00
  • Ofcourse it will not work for CORS situation, but it works pretty well for same domain/where origin is allowed.
    – Gogol
    Apr 2, 2020 at 11:08
3

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

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.

1

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.