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

最新推荐文章于 2023-09-07 16:22:11 发布

原创最新推荐文章于 2023-09-07 16:22:11 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #html

web 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在iframe子页面中监听父页面的事件，通过使用jQuery的on方法结合load事件，实现在iframe加载完成后对子页面元素进行事件绑定。具体展示了如何在子页面的li.item元素上绑定click事件。

iframe子页面获取父页面的mouseenter事件,需要load事件指定iframe元素加载完成时运行的函数
父页面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>
</ul>
 
</body>
</html>

通过$(’#myframe’).contents().find(‘li.item’)可以找到iframe子页面里的li.item元素，但就是不能响应click事件