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

一个页面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

原文地址:https://www.cnblogs.com/linJie1930906722/p/6607810.html