Why Does This Onclick Event Not Work in an HTML Iframe

OnClick function doesnt fire on iframe?

Another solution is to overlay a transparent div and add a click event to that div.
Working sample: http://jsfiddle.net/w1ll3m/AxJHH/

<div class="container">
    <iframe src="#url"></iframe>
    <div class="overlay"></div>
</div>

css to position the div.overlay over the iframe:

.container{position:relative;float:left;}
.overlay{top:0;left:0;width:100%;height:100%;position:absolute;}

Add the event:

$('.overlay').click(function(){alert('hello');});

iframe not loading HTML Page I want to perform onClick operation on it but instead HTML is working on its own

First of all, you must add some sort of a container over the iframe to block any interactions with the iframe. Additionally, that container must be bound to a mouse click event that would take you to the page displayed in the iframe.

Here is a working example:

// Here is an event listner to bind a click event to the container
// that covers the iframe.
// All it does is take you to the page that the iframe is displaying
document.getElementById("cover-iframe").addEventListener('click', () => {
  document.location.href = 'test.html'
})

/* Set the size of this container (width, height)
to change the size of the iframe */
.container {
  position: relative;
  width: 50rem;
}

.iframe {
  width: 100%;
}

/* This is to make the container cover the iframe */
#cover-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <!-- This container is to hold the iframe and the container that will cover the iframe  -->
  <div class="container">
    <!-- "test.html" can be changed to the page you want to display -->
    <iframe src="test.html" frameborder="1" class="iframe"></iframe>
    <span id="cover-iframe"></span>
  </div>
</body>

</html>

Iframe onclick not working in Firefox and Opera

You must use contentWindow and contentDocument to support all browsers:

var frame = document.getElementById('wysiwyg');
if(frame.contentWindow) {
    //
} else if(frame.contentDocument) {
    //
}

Onclick opens URL in new TAB but not the second URL in iframe

Unless I've misunderstood, try onclick="Link()" to actually call the function in your script. At the moment you are telling the window to open the href in the iframe.

Then change your target back to _blank

You also have a few typos which will stop stuff being called

HTML:

<a href="http://www.cnn.com" onclick="Link()" target="_blank">Click</a>

<iframe id="iframe_test" src="" frameborder="0" scrolling="no" width="400px" height="400px"></iframe>

JS:

function Link() {

   document.getElementById("iframe_test").src = "http://www.yahoo.com";

}

Why Does This Onclick Event Not Work in an HTML Iframe

OnClick function doesnt fire on iframe?

iframe not loading HTML Page I want to perform onClick operation on it but instead HTML is working on its own

Iframe onclick not working in Firefox and Opera

Onclick opens URL in new TAB but not the second URL in iframe

Related Topics

Leave a reply