javascript - How to working onclick event on div including iframe? - Stack Overflow

admin管理员组

文章数量:1357307

How to fire onclick event when click the image ?
and one limitation is that I can't modify testcode2.html.

now the href properties only work.
please help me :( !!

<script>
    function go()
    {
         alert("Hello World!");
    } 
</script>
<div href="#" onClick="go()">
  <iframe src="testcode2.html" />
</div>

testcode2.html is as follows:

<a href="">
<img src=".jpg"/></a>

How to fire onclick event when click the image ?
and one limitation is that I can't modify testcode2.html.

now the href properties only work.
please help me :( !!

<script>
    function go()
    {
         alert("Hello World!");
    } 
</script>
<div href="#" onClick="go()">
  <iframe src="testcode2.html" />
</div>

testcode2.html is as follows:

<a href="http://translate.google.">
<img src="http://cdn01.cdn.pinkisthenewblog./wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/></a>

• javascript
• html
• iframe
• onclick

Share Improve this question Follow edited Feb 3, 2014 at 6:13 user3264549 asked Feb 3, 2014 at 5:53 user3264549user3264549 2111 silver badge33 bronze badges 2

• is testcode2.html on the same domain as your main html ? – Madhur Commented Feb 3, 2014 at 6:15
• no. they are different domain each other – user3264549 Commented Feb 3, 2014 at 6:22

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

This might help you http://jsfiddle/fjGJ5/

jQuery

$(document).ready(function(){
$(".frame").on('click', call);
});

function call(){
alert("I am called.");
}

HTML

<div class="frame">
    <iframe src="http://www.jsfiddle/" name="iframe_a"></iframe>
</div>

Give the div an ID and then fire the onClick event using jQuery.

<script type="text/javascript" src="jquery-1.10.2.min.js">
$( document ).ready(function() {
    $("#divIFrame").click(function(){
    alert("Hello World");
    });
 });
</script>
<div href="#" ID="divIFrame">
  <iframe src="testcode2.html" />
</div>

Move your script on testcode2.html

<a href="javascript:go()">
<img src="http://cdn01.cdn.pinkisthenewblog./wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/></a>

Then make the redirect by javascript after alert

To call a Javascript function defined in parent use window.parent

<a href="http://translate.google." onclick="window.parent.go();">
    <img src="http://cdn01.cdn.pinkisthenewblog./wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/>
</a>

You might want to stop the redirect in which case add a return false to your go() function and then use onclick="return window.parent.go();"

<script>
  window.onload = function() {
    document.getElementById("test_frame").contentWindow.document.body.onclick = function(){
      alert("Hello World!");
    };
  };
</script>

<iframe id="test_frame" src="testcode2.html" />

EDIT: If you cannot use getElementById(), querySelector() or getElementsByTagName() may work.

    <script>
      window.onload = function() {
        document.querySelector("iframe").contentWindow.document.body.onclick = function(){
          alert("Hello World!");
        };
       /* document.getElementsByTagName("iframe")[0].contentWindow.document.body.onclick
= function(){
          alert("Hello World!");
        }; */
      };
    </script>

    <iframe id="test_frame" src="testcode2.html" />

本文标签： javascriptHow to working onclick event on div including iframeStack Overflow