Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

iframe...onclick

Discussion in 'JavaScript' started by rickbbt, Sep 1, 2011.

0
  1. #1
    Hi guys,

    I would like to do the following:
    Create an iframe that loads an external page from an external domain. Once a click on that page/iframe, that iframe will be closed or replaced by something else (like a link). This is possible if we have a link in the first place because we have the onclick property, but since we use an iframe in our case (that does not have onlclick property) I guess we can do this by using JavaScript.
    Can you help me?

    Thank you in advance.
    SEMrush
     
    rickbbt, Sep 1, 2011 IP
    SEMrush
  2. programmer_best1

    programmer_best1 Active Member

    Messages:
    180
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    83
    #2
    i guess this could happen by marking js reload function which send php variable through $_GET method
     
    programmer_best1, Sep 1, 2011 IP
  3. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #3
    You could give the iframe an id and use jQuery's click(). 
    $('#iframeId').click(function() {
  alert('Handler for .click() called.');
  // or do what you want here
});
    Code (javascript):
     
    Rukbat, Sep 1, 2011 IP
  4. rickbbt

    rickbbt Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi,

    Thank you for your answer.
    The code works well when you have div for example, but it does not work for an iframe.
    The code I use bellow:
    
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>

<iframe src="http://webcounter.com" id="iframe" style=""></iframe>

<div id="target">
  Click here
</div>

<script>
$('#iframe').click(function() {
  alert('Handler for .click() called.');
});
</script>


</body>
</html>
    HTML:
    If you try and replace $('#iframe') with $('#target') you can see that it works fine when clicked on the div.
    However it does not work for the iframe because a click inside the frame does not "bubble up". You can also note that if you click on the iframe's thin border it will actually work, so the code is fine.
     
    rickbbt, Sep 1, 2011 IP
  5. rickbbt

    rickbbt Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi,
    Can you give more details please?
    Thank you.
     
    rickbbt, Sep 1, 2011 IP
  6. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #6 
    
<div id="clicker"><iframe src="http://webcounter.com" id="iframe" style=""></iframe></div>

<script>
$('#clicker').click(function() {
  alert('Handler for iFrame called.');
});
</script>
    Code (markup):
     
    Rukbat, Sep 2, 2011 IP
  7. rickbbt

    rickbbt Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks again, but it still does not work. A click inside the iframe will not register.
    Any other ideas?
     
    rickbbt, Sep 3, 2011 IP
  8. hdewantara

    hdewantara Active Member

    Messages:
    416
    Likes Received:
    35
    Best Answers:
    17
    Trophy Points:
    80
    #8
    Cross-domain property access wouldn't be possible with javascript, but if the iframe's height and width can be set, then maybe you could do a little trick by using an overlay and CSS:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
	#clicker{
		background-color: red;
		position:absolute;
		opacity: 0.1;
		filter:alpha(opacity=10);
		width: 500px;
		height: 100px;
	}
	iframe{
		width: 500px;
		height: 100px;
		border-width: 0px;
	}
</style>

</head>

<body>
<div>
	<div  id="clicker" onclick="alert('HAA!')"></div>
	<iframe src="http://webcounter.com"></iframe>
</div>

</body>
</html>
    Code (markup):
     
    hdewantara, Sep 3, 2011 IP
  9. HalvinCarris

    HalvinCarris Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    You can't really register clicks inside an iframe coming form another domain (if I'm correct).
     
    HalvinCarris, Sep 3, 2011 IP
  10. rickbbt

    rickbbt Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Indeed, nice way to put it, except the fact that the click will not get to the page in the frame (that is a must). Maybe there is no good way to do this indeed...
     
    rickbbt, Sep 3, 2011 IP
  11. rickbbt

    rickbbt Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    No solution? This would benefit many...
     
    rickbbt, Sep 6, 2011 IP
  12. JohnnySchultz

    JohnnySchultz Peon

    Messages:
    277
    Likes Received:
    4
    Best Answers:
    7
    Trophy Points:
    0
    #12
    maybe you can put an overlay to that iframe then put the onclick event on that overlay..

    
<div style="position:relative; width:300px; height:300px;">
<div id="frame-overlay" style="position:absolute; width:300px; height:300px; top:0; left:0; z-index:10;"></div>
<iframe style="width:300px; height:300px;"></iframe>
</div>

<script type="text/javascript">

  document.getElementById("frame-overlay").onclick = function()
  {
    // do your code here..
  };

</script>
    HTML:
     
    JohnnySchultz, Sep 7, 2011 IP
  13. hotnoob

    hotnoob Member

    Messages:
    96
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    28
    #13
    i can think of another method, but it is probably much too complex for you.

    in short, you would have to capture the window events, probably by using window.onclick, and then every time a click would happen, you would have to manually determine if that click was in the iframe or not.

    it's not overly difficult to do, but there is a lot of potential for cross-browser compatibility, which would be the most difficult part.
     
    hotnoob, Sep 11, 2011 IP
  14. perfect101

    perfect101 Greenhorn

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #14
    I know this is old, but I have been looking for a solution for this for a long time. Anyone have any ideas?

    Thanks
     
    perfect101, Sep 21, 2012 IP
  15. Mispero

    Mispero Greenhorn

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #15
    Put the iframe html code into your parent page.
    This is a security problem
     
    Mispero, Sep 22, 2012 IP