I need to know when a user clicks on an IFRAME so that I can process some code. I tried different things but it just doesn't work and can't find a solution so thought I would see how good the DP community is! Here's something for you to start with: <HTML> <HEAD> </HEAD> <BODY bgcolor="#000000"> <table border=0 bgcolor="#FFFFFF"> <tr onClick="alert('IFRAME CLICK');"> <td colspan=2> <iframe src="http://www.google.com.au" height="300" width="300" border="0" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe> </td> </tr> <tr onClick="alert('Bottom row click');"> <td>1</td> <td>2</td> </tr> </table> </BODY> </HTML> Code (markup): So when you open that... you can click the bottom row in the table and the alert "Bottom row click" will appear. However with the top row the alert "IFRAME CLICK" does not appear. The onclick event is not firing on that table row... due to the IFRAME. Is there any way I can do this??
I think your probelm may be that the top row is not exposed to be clicked on. Your only seeing the iframe. If you add some text you can see where the "clickable" region of the top row actually is. Thats why the alert is not poping up. Try this out, <HTML> <HEAD> </HEAD> <BODY bgcolor="#000000"> <br><br><br><br> <table width="800" border=0 bgcolor="#FFFFFF"> <tr bgcolor="#000099" onClick="alert('IFRAME CLICK');"> <td colspan=2><font color="#FFFFFF">THIS IS THE TOP ROW. CLICK HERE.</font><BR> <iframe src="http://www.google.com.au" height="300" width="800" border="0" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe> </td> </tr> <tr bgcolor="#000099" onClick="alert('Bottom row click');"> <td>1</td> <td>2</td> </tr> </table> </BODY> </HTML> Code (markup):
That still doesn't work.... I need that alert to appear when the IFRAME is clicked.... not just the top row.
You can also skip the iframe, go to google and genarate your own google search bar. then you would be able to add the "onclick" atribute to the whole form tag or even just the input field tag if you want to know when they click on it. Something like this: <HTML> <HEAD> </HEAD> <BODY bgcolor="#000000"> <br><br><br><br> <table width="800" border=0 bgcolor="#FFFFFF"> <tr> <td colspan="2" align="center"><!-- SiteSearch Google --> <form method="get" onClick="alert('IFRAME CLICK');" action="" target="_top"> <table border="0" align="center"> <tr><td bgcolor="#ffffff" nowrap="nowrap" valign="top" align="center" width="85"> <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a> </td> <td bgcolor="#ffffff" nowrap="nowrap" width="400" align="center"> <input type="hidden" name="domains" ></input> <label for="sbi" style="display: none">Enter your search terms</label> <input type="text" name="q" size="35" maxlength="255" value="" id="sbi"></input> <label for="sbb" style="display: none">Submit search form</label> <input type="submit" name="sa" value="Search" id="sbb"></input> </td></tr> <tr> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff" nowrap="nowrap"> <table> <tr> <td bgcolor="#ffffff" width="70"> <input type="radio" name="sitesearch" value="" checked id="ss0"></input> <label for="ss0" title="Search the Web"><font size="-1" color="black">Web</font></label></td> <td width="210"> <input type="radio" name="sitesearch" id="ss1"></input> <label for="ss1" title="Search www.unitedlocalbands.com"><font size="-1" color="black"></font></label></td> </tr> </table> <input type="hidden" name="client" value="pub-3703067683828794"></input> <input type="hidden" name="forid" value="1"></input> <input type="hidden" name="ie" value="ISO-8859-1"></input> <input type="hidden" name="oe" value="ISO-8859-1"></input> <input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#990000;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:990000;LC:990000;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:11"></input> <input type="hidden" name="hl" value="en"></input> </td></tr></table> </form> <!-- SiteSearch Google --> </td> </tr> <tr bgcolor="#000099" onClick="alert('Bottom row click');"> <td>1</td> <td>2</td> </tr> </table> </BODY> </HTML> Code (markup): Try this out, the search bar wont work though,
"onmouseover" seems to work! But you need to put it in the <td onMouseover="alert('IFRAME CLICK');"> tag <HTML> <HEAD> </HEAD> <BODY bgcolor="#000000"> <br><br><br><br> <table width="800" border=0 bgcolor="#FFFFFF"> <tr bgcolor="#000099" onClick="alert('IFRAME CLICK');"> <td onMouseover="alert('IFRAME CLICK');" colspan=2><font color="#FFFFFF">THIS IS THE TOP ROW. CLICK HERE.</font><BR> <iframe src="http://www.google.com.au" height="300" width="800" border="0" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe> </td> </tr> <tr bgcolor="#000099" onClick="alert('Bottom row click');"> <td>1</td> <td>2</td> </tr> </table> </BODY> </HTML> Code (markup):
Its got nothing to do with Google... forget Google.... I want to load anything in that IFRAME, the contents I am not concerned with... all I want to know is when someone CLICKS the IFRAME.... onmouseover doesn't help me I want to know when someone clicks on it.
Build yourself a table on the iframe page itself. Then you can add the "onclick" attribute to the <tr> tag of that table on the iframe page. Putting onclick on the table where you are sourcing the iframe obviously doesnt work.
Yes I realise it doesn't work which is why I am asking if anyone knows how to do this. The problem is I don't have control over the page within the IFRAME, it doesn't belong to me, or yes I could do it easily but putting the trap on that page itself.
this code nearly works <a href="javascript:alert();"><iframe src="http://www.google.com.au" height="300" width="300" border="0" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></a> Code (markup): this works, but links on the page go to where they normally go. what you can do is rewrite all the links to go though a custom javascript function on your end so everything gets processed and still goes to the right place when clicked. it's not going to be easy but i think it's possible.
That doesn't work.... tries in FireFox. I think this is just not possible... there's all sorts of issues I am touching on here like cross site scripting etc. The only way I can get it to do it is if I ask the webmaster to add code to the page that is being displayed in the IFRAME and add a body tag like this: <BODY onclick="alert('iframe click');"> Code (markup): Then it works ... I just didn't want to have the webmaster do that.... it's one more step which complicates the process.