onclick in an iframe

Asked

Viewed 988 times

0

Good Afternoon!

Well I’m trying to onclick to make the banner disappear when I click on it, but I’m not getting it ! My code: 

 <div id="mime">
      <iframe style="border:none; overflow:hidden; width:605px; height:250px; float:left;" frameborder="0" scrolling="No" src="http://migre.me/pWQGp"></iframe></div>

    <script>
    var div = document.getElementById('mime');
    div.style.display = 'none';

    // Mostra a div após 1 minuto
    setTimeout(function() {
        div.style.display = 'block';
    }, 60000);

    </script>

I’ve tried to:

      <div id="mime">
        <iframe style="border:none; overflow:hidden; width:605px; height:250px; float:left;" frameborder="0" scrolling="No" src="http://migre.me/pWQGp" onClick="OcultarDiv();" style="cursor: pointer;"></iframe>
    </div>
<script>
var div = document.getElementById('mime');
div.style.display = 'none';

// Mostra a div após 1 minuto
setTimeout(function () {
    div.style.display = 'block';
}, 1);

 function OcultarDiv(){  // função ocultar
    div.style.display = "none";
 }
</script>

I tried several other codes, but I have no results! Please help me ! (I’m a beginner in javascript, I know almost nothing, but I’m learning !)

javascript

1 answer

1

The iframe despite being on your page is an external element and the onclick does not work as expected. Events fired on that page belong to it and cannot be manipulated outside of it. Exception case is if iframe is in the same domain.

But if you want to know when the iframe was clicked you can use this idea:

creates a new div that has position and dimensions equal to the div that has iframe. Gives it position: absolute; and z-index larger than the one in the iframe to get it to be on top of the other. Then you can view events on that div and the user doesn’t notice.

Note that in this case the user cannot click on the banner advertising, and this is not very correct with the advertiser...

var frameDiv = document.getElementById('mime');
var filterDiv = document.getElementById('filtro');
filterDiv.style.zIndex = 100;
filterDiv.addEventListener('click', function () {
    frameDiv.style.display = 'none';
});

jsFiddle: http://jsfiddle.net/wfe7vzcr/

  • Sergio, I tried with this code, but I couldn’t ! Print of how my site looked: http://prntscr.com/7e88wy which could be this ?

  • @Alexsiqueira has a link to this site?

  • @Segio redeselect.org/trexs , Would you have some other means of communication to help me better ? Skype , facebook... ?

  • @Alexsiqueira the idea of this site is to share knowledge here and not on private channels. I saw your site but did not see the implementation of my code. This idea of having an ad that follows the mouse is not very friendly :)

  • Well the idea of the ad following the mouse is to have more clicks, I’m trying to make a kind of click scheme. I just put your code on my site : http://redeselect.org/trexs/ , As you can see neither the 1-minute setTime worked, nor the "follow the mouse" :/

  • @Alexsiqueira confesses not to understand what you want to do. You say you want to hide the iframe after the click, but the iframe follows the mouse forcing the click? then you want to force that someone click x in x time? that’s not very nice.

  • Yes that’s exactly it, when the person clicks on the advertising it automatically hides!

  • @Alexsiqueira, I don’t think you understand part of my answer. If you want to click on the iframe this click will not be heard from the parent page and there is no way to know that the iframe was clicked and then you can’t hide it. If you want to get the idea I suggested with the new div#filtro on top of the iframe, so it won’t be possible to artificially click on the ad. I think you’re at a dead end. I also personally think that forcing a click in this way is bad practice.

Show 3 more comments

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.