父页面操作嵌套iframe子页面的HTML标签元素

本文转载自查看原文 2017-03-23 22:37 4330 Html5/ JavaScript/ Jquery/ 父页面操作子页面

一个页面A.html使用iframe嵌套一个页面B.html，在A页面写js操作B页面HTML元素，首先要获取到B页面document对象，才能对嵌套页面进行操作

请看一个实例，在A页面写js操作B页面div的内容：

A.html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
    </head>
    <body >
        <iframe name="iframe1" src="B.html"></iframe>
    </body>
</html>

<script>

        window.onload=()=>{
                
                $(window.frames["iframe1"].document).on("click","#btn",function(){  //window.frames["iframe1"].document获的iframe标签嵌套页面document对象
                    
                    $(this).html("1123");
                })
        }
    
</script>

B页面代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
        
    </head>
    <body id="body">
        <div id="btn" >测试操作</div>
    </body>
</html>

当点击 “测试操作” 时就这个文字就被修改成“1123”

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 JQuery操作iframe父页面与子页面的元素与方法操作iframe父页面、子页面的元素和方法 js JQuery操作iframe父页面与子页面的元素与方法 JQuery操作iframe父页面与子页面的元素与方法 js 在iframe子页面获取父页面元素,或在父页面获取iframe子页面的元素的几种方式 easyUI的iframe子页面操作父页面元素 JQ子页面对父页面的元素进行操作 javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素, 父页面获取iframe子页面的高度 iframe调用父页面和子页面的方法或者变量