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

最新推荐文章于 2022-11-03 17:58:59 发布

Qiustion

最新推荐文章于 2022-11-03 17:58:59 发布

阅读量5.5k

点赞数

分类专栏： HTML5+CSS3+JS

本文链接：https://blog.csdn.net/Qiustion/article/details/76509856

版权

HTML5+CSS3+JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

父页面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元素加载完成时运行的函数，这子页面就能响应点击事件。