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.
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):
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.
<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):
Thanks again, but it still does not work. A click inside the iframe will not register. Any other ideas?
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):
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...
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:
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.
I know this is old, but I have been looking for a solution for this for a long time. Anyone have any ideas? Thanks