iframe子页面获取父页面的点击事件

来源：互联网发布：复旦大学软件工程学院编辑：程序博客网时间：2024/05/16 07:13

父页面Html代码：

<head>    <meta charset="UTF-8">    <title>parent page</title>        <script type="text/javascript" src="./js/jquery-1.11.2.js"></script>    </head><body><iframe id="myframe" width="500px" height="100px" frameborder="1px" src="test_child.html">    </iframe></body></html><script type="text/javascript">     $('#myframe').on('load',function(event){   $('#myframe').contents().find('li.item').on('click',function(){     console.log('子页面的索引是: '+$(this).index());   }); });    </script>

子页面Html代码：

<html lang="en"><head>    <meta charset="UTF-8">    <title>child page</title>        <style type="text/css">        ul li{list-style:none;}        .list{height:60px;}        .list .item{width:50px;height:50px;background:red;float:left;margin:0px 3px;}    </style></head><body><ul class="list">    <li class="item"></li>    <li class="item"></li>    <li class="item"></li>    <li class="item"></li>    <li class="item"></li>    <li class="item"></li></ul></body></html>

通过$('#myframe').contents().find('li.item')可以找到iframe子页面里的li.item元素，但就是不能响应click事件
$('#myframe').contents().find('li.item').click(function() { ... });
后来经高手指点后，先用load事件指定iframe元素加载完成时运行的函数，这子页面就能响应点击事件。

阅读全文

0 0