Click on iframe to make a button appear

Question

I have a pub in iframe, I have a button and I would like to make sure that the user is obliged to click on the ad before the button appears but I can not find how to do it . Thank you for your help

<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">

<input id="bouton" type="submit" style="color:black;" name="Envoyer" id="Envoyer" value="SEND"><br/>

<iframe scrolling="no" frameborder="0" height="90" width="728" src="http://www.website.com/ban.php?id=701&f=728x90"></iframe>

</form>

I tried :

<div id="pub" style="display:none;">
<input id="bouton" type="submit" style="color:black;" name="Envoyer" id="Envoyer" value="SEND">
</div>
<button onclick="document.getElementById('pub').style.display = 'block';"><iframe scrolling="no" id="pub" frameborder="0" height="90" width="728" src="http://www.website.com/ban.php?id=701&f=728x90"></iframe>
</button>

EDIT :

I tried with it also but I did not succeed:

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById("pub").dispatchEvent(evt);

_"but I can not find how to do it"_, but what have you tried so far? — evolutionxbox, Mar 10 '17 at 14:20
Simple answer you can't unless the content of the `iframe` is on the same domain. — thekodester, Mar 10 '17 at 15:25
@kodecount - That'll only work if both pages are in the same domain. "*user is obliged to click on the ad*" suggests that maybe these pages will be hosted from different domains. — JDB, Mar 10 '17 at 18:15
Yes I know that but he won't be able to unless CORS is setup on the other domain. — thekodester, Mar 10 '17 at 18:17
Possible duplicate of [How do you use window.postMessage across domains?](http://stackoverflow.com/questions/3457391/how-do-you-use-window-postmessage-across-domains) — JDB, Mar 10 '17 at 18:31

score 1 · Accepted Answer · answered Mar 12 '17 at 16:45

It was not easy (for me) but I managed to do what I want to do. I put the result at the disposal if it will interest somebody in the same situation as me

HTML

<button type="button" id="show-comments">Show Comments</button>
<div id="comments">
<iframe scrolling="no" frameborder="0" height="90" width="728" src="www.test.com"></iframe><br/>
<div id="result"><input type="submit" value="SEND"></div>
</div>

CSS

#result {
  padding: 10px;
  display: none;
}
#comments {
  padding: 10px;
  display: none;
}

JQUERY

$("#show-comments").click(function(){
    $("#comments").show();
});

$(window).click(function(e) {
    $('#result').hide();
});

$(window).blur(function(e) {
    $('#result').show();
});

https://jsfiddle.net/w0dph6e0/1/

Click on iframe to make a button appear

1 Answers1