父页面操作嵌套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>

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

上一篇:Java MyBatis insert数据库数据后返回主键


下一篇:Thymeleaf模版--子页面单独引入CSS、JS文件