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="" width="224px" height="429px" frameborder="0" scrolling="no"></iframe>

/

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./project/157203/widget?escape=false" width="224px" height="429px" frameborder="0" scrolling="no"></iframe>

http://jsfiddle/qX4fu/

• javascript
• jquery
• html
• iframe

• what's the purpose of the iframe? – Joseph Commented Jul 9, 2012 at 19:38
• 2 You could maybe layer a div over it? – romo Commented Jul 9, 2012 at 19:40

3 Answers 3

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/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.

It is possible, though I would not remend 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/qX4fu/1/

If you are using HTML5 I would suggest making use of the new "sandbox" property BUT it is not yet patible with all the browsers. http://www.w3schools./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./a/9880360/1404129 (I ran into this answer later)