Disable iframe edit

Disable all links inside IFRAME using jQuery

up vote 2 down vote favorite 3

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. jquery shareimprove this question edited Jan 24 '11 at 0:54 templatetypedef 144k31345575 asked Jan 24 '11 at 0:51 Shadow_boi 98921020

Well, this shouldn't be restricted by browser security. –  Anonymous Jan 24 '11 at 0:55 add a comment

8 Answers

active oldest votes

up vote 1 down vote accepted	or else you could put the script inside the iframe itself and thus shortening the code to this way. lighter performance i believe. $(document).ready(function(){ $('a').click(function(event) { alert("demo only"); event.preventDefault(); }); }); shareimprove this answer edited Aug 24 '11 at 5:18 Pedro Lobito 8,02322960 answered Jan 24 '11 at 6:51 lilsizzo 1389
	add a comment

up vote 6 down vote	I would expect that $(document).ready executes before the content of the iframe has loaded. Try using the onload attribute for the iframe instead. shareimprove this answer answered Jan 24 '11 at 0:57 Mads Mogenshøj 1,344720
	Thank you for the quick answer! It works now. –  Shadow_boi Jan 24 '11 at 1:02 You're welcome :) –  Mads Mogenshøj Jan 24 '11 at 1:03 add a comment

up vote 1 down vote	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(); }); }); shareimprove this answer edited May 18 '12 at 6:01 Luke Abbott 29528 answered Apr 12 '12 at 19:05 Abdullah Kiser 111
	add a comment

up vote 1 down vote

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() and men were men. Just put a transparent div over it! shareimprove this answer answered Dec 13 '13 at 23:08 lol 78711226

and what if i want to scroll the inner content of iframe? –  Karolis Šarapnickis Oct 29 '14 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 '14 at 2:17 ahh, we're facing the same issue, except designers also want scrolling –  Karolis Šarapnickis Oct 30 '14 at 7:33 add a comment

up vote 1 down vote

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; } div.lockframe { z-index: -2; } Load up your page and the div is what will accept the click events, not the iframe. shareimprove this answer answered Mar 29 '14 at 17:09 Zoccadoum 888

add a comment

up vote 0 down vote	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>')); }); shareimprove this answer answered May 8 '13 at 0:00 Bula 834317
	add a comment

up vote 0 down vote

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(); }); }); }); shareimprove this answer answered May 31 '13 at 23:13 Steven Bennett 261

does this work for content loaded from a different domain? is browser security an issue here? –  lol Dec 13 '13 at 23:00 add a comment

up vote 0 down vote	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. shareimprove this answer answered Dec 1 '14 at 12:23 Josan Iracheta 563417
	add a comment