Iframe click with javascript doesn't work

Question

I have this javascript code:

function start1(dis,www){
    var visina = screen.availHeight;
    var content = '<a href="#" id="showRtb"><div id="showRtbn" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;background: #E81515;cursor: pointer; border-radius:5px; margin-left:-15px;"> <iframe src="https://domain.com/hotel/2" style="border:0px #FFFFFF none;" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div>   </a>          <div id="rtb" style="width:100%; height:100%; opacity:0; position:fixed; box-sizing: border-box; left:0px; top:0px; z-index:99999999; display:none; background:rgba(0, 0, 0, 0.8)"><iframe src="'+www+'" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb" style="background:#fff; cursor:pointer; top:15px; right:15px;  z-index:9999999; position:fixed; border-radius:25px;"><img style="width:50px; height50px;" src="http://i.imgur.com/QqlcQwu.png"></div></div>';

var newNode = document.createElement("DIV");  
newNode.innerHTML = content;
document.body.appendChild(newNode); 



   var rtb = document.getElementById("rtb"),
  timer = null;

document.getElementById("showRtb").addEventListener("click", function() {
  if (rtb.style.opacity != 1) {
    clearTimeout(timer);
    rtb.style.display = "block";
    timer = setInterval(function() {
      rtb.style.opacity = +rtb.style.opacity + .10;
      if (+getComputedStyle(rtb).getPropertyValue("opacity") >= 1) {
        clearInterval(timer);
      }
    }, 30)
  }
});

document.getElementById("hideRtb").addEventListener("click", function() {
  if (rtb.style.opacity != 0) {
    clearTimeout(timer);
    timer = setInterval(function() {
      rtb.style.opacity = +rtb.style.opacity - .10;
      if (+getComputedStyle(rtb).getPropertyValue("opacity") <= 0) {
        rtb.style.display = "none";
        clearInterval(timer);
      }
    }, 30)
  }
});




}

and as you can see, I create a link inside the body with id showRtb and inside that an iframe with content, but when I click it doesn't work, doesn't want to show div with id rtb ...

When I change the content so instead of an iframe I post an image, then it works well, but now with the iframe it doesn't work. Why? What is the problem?

So, I want when I click on showRtb to open div with ID rtb ...

UPDATE:

var content = '<div id="showRtb1" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;cursor: pointer; border-radius:5px; margin-left:-15px;"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><a href="#" id="showRtb"><div id="showRtb" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 99999999;cursor: pointer; opacity:0; pointer; border-radius:5px; margin-left:-15px;"></div></a><div id="rtb"><iframe src="'+www+'"  name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';

You have no access to an iFrame with content from another server. Also that iFrame has no access to parent or scripts in the parent. Also your HTML is invalid. — mplungjan
– mplungjan, Commented Jun 15, 2016 at 15:20
No, I dont want access, I just want when click on that iframe ID to open other div with ID rtb ... — Aleks Per
– Aleks Per, Commented Jun 15, 2016 at 15:22
Your click inside the showRtb is absorbed by the iFrame and not sent to the function — mplungjan
– mplungjan, Commented Jun 15, 2016 at 15:27

Sylvan D Ash · Accepted Answer · 2016-06-15 16:09:40Z

1

Change this:

var content = '<a href="#" id="showRtb"><div id="showRtbn"> <iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div></a><div id="rtb"><iframe src="'+www+'"  name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';

To be something like:

var content = '<div id="showRtbn"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><a href="#" id="showRtb">Show RTB</a><div id="rtb"><iframe src="'+www+'"  name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';

Remove the iFrame from within the anchor tags (<a>..</a>) and you can set its containing <div> as hidden. NOTE: I've removed your styles. You should consider moving them into a stylesheet

JS:

document.getElementById("showRtb").addEventListener("click", function() {
  rtb.style.display = "block";
  console.log("clicked");
});

edited Jun 15, 2016 at 16:09

answered Jun 15, 2016 at 15:33

Sylvan D Ash

1,13714 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sylvan D Ash Over a year ago

Probably because I've removed the styles you had added...?

Aleks Per Over a year ago

Now I see it, but when I click nothing happend... so click on showRtb dont open rtb

Sylvan D Ash Over a year ago

Make sure you either have the styles in your HTML or you remove the style checker in the action listener. I've updated the code with how the JS may look like (without the style check)

Aleks Per Over a year ago

I update my question with new code, now I try to put an div with opacity:0 in the front but again dont work...

Sylvan D Ash Over a year ago

Add console logs in the on click listener and first confirm if the click event gets fired. Then I'd suggest you first simplify your code to make sure the basic logic works (in this case, click event and display/hide iframe div), after which you can add everything else

|

Collectives™ on Stack Overflow

Iframe click with javascript doesn't work

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related