关于HTML的IFRAME标签页面间JS交互方法的总结

Iframe间js数据交互示范

备注1:该交互操作只能在同一域名下两个页面进行;

备注2:该操作设计使用不当会造成JS变量、函数混乱;

备注3:在能使用AJAX技术的前提下,尽量避免使用该种数据交互方式;

备注4:该操作可替代window.open()方式打开新窗口且便于JS控制;


文件 a.html


<html>
<head>
<meta charset="UTF-8">
<title>Document Atitle>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js">script>
<script>
function run(){
//a.html = 父层;b.html = 子层

//注意:该函数内的操作,必须在网页a.html与b.html完全加载完成后(或以绑定事件形式)才能执行成功!!!

//方法1,不支持子层透过父层再调用子层
//var i = document.getElementById("iframeA").contentDocument
//console.log("function 1",i,i.getElementById("txt2").innerText)


//方法2,使用jquery库
//jQuery 遍历 - contents() 方法找到段落中的所有文本节点
var ii = $("#iframeA").contents().find("#txt2").text()
console.log("function 2",ii)

//父层调用子层定义的全局方法
$("#iframeA")[0].contentWindow.run2()
//$("#iframeA").get(0).contentWindow.run2() //与上一行方法等价


}
script>
head>
<body onload="run()">
<div id="txt1">
window A
div>
<iframe id="iframeA" src="b.html" frameborder="0">iframe>
<input type="button" value="trigger" onclick="run()">
body>
html>


文件 b.html


<html>
<head>
<meta charset="UTF-8">
<title>Document Btitle>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js">script>
<script>

//获取父窗口元素
var p = window.parent.document 

访客评论

暂无评论
发表评论
当前字数:0
评论内容限制在250字以内,提交后经管理员审核后发布。
提交评论