Stop an embedded iframe from redirecting

Question

Is there a way to stop an embedded iframe from being clickable or make the entire iframe clickable? I want the iframe to pull the data, but I don't want visitors to be able to click the iframe and be redirected from only one spot on the iframe.

Is that possible? Here's an example of the iframe:

<iframe src="http://www.indiegogo.com/project/157203/widget?escape=false" width="224px" height="429px" frameborder="0" scrolling="no"></iframe>

http://jsfiddle.net/qX4fu/

what's the purpose of the iframe? – Joseph Jul 09 '12 at 19:38 — Joseph, Jul 09 '12 at 19:38
You could maybe layer a div over it? – romo Jul 09 '12 at 19:40 — romo, Jul 09 '12 at 19:40

Denys Séguret · Accepted Answer · 2012-07-09T19:52:10.120

As your iframe is obviously served by another domain, standard solutions cannot be used. You can't read or modify the iframe nor its document.

But you can put an invisible div over it like this : http://jsfiddle.net/dystroy/Afg3K/

<div id=a></div>

#a{
    position:fixed;
    top:0;
    left:0;
    width:224px;
    height:429px;
}

But most of the times, those things are forbidden by the iframe inclusion contract. Look at your agreement before you do it.

jbabey · Answer 2 · 2012-07-09T19:49:52.803

It is possible, though I would not recommend it.

Messing with default browser behavior such as anchor tag clicks will generally frustrate a user and prevent them from returning to your page.

Furthermore, as dystroy stated in his answer, the legal strings attached to dropping iframes on your page usually explicitly forbids this kind of behavior.

That being said, returning false from an event handler will prevent the browser from receiving the event:

document.getElementById('yourFrame').contentWindow.document.body.onclick = function () { 
    return false; 
};

It is worth saying that this will not work if the iframe is in a different domain than where the script is running from. If that is the case, you will need to construct a transparent overlay div that swallows the click events and absolutely position it over the iframe.

Here is a fiddle demonstrating both approaches: http://jsfiddle.net/qX4fu/1/

score 1 · Answer 3 · edited May 23 '17 at 12:30

If you are using HTML5 I would suggest making use of the new "sandbox" property BUT it is not yet compatible with all the browsers. http://www.w3schools.com/tags/att_iframe_sandbox.asp

In my case I just added "allow-forms" and "allow-scripts" as the sandbox property values and the embedded site no longer redirect and still can run JavaScript

ex: <iframe sandbox="allow-forms allow-scripts" ... /></iframe>

If anyone knows any Cons to using this approach I would love to know about it.

Someone else with same answer: https://stackoverflow.com/a/9880360/1404129 (I ran into this answer later)

Stop an embedded iframe from redirecting

3 Answers3