iframe-父子-兄弟页面相互传值(jq和js两种方法)
作者：互联网
转载于：https://blog.csdn.net/u013299635/article/details/78773207
效果图：（注意url协议不能以 filter:/ 开头）
1.父级html源码：
main.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>main</title>
<style type="text/css">
iframe{float:left;width:48%;height:500px;margin-left:1%;border:1px solid #eee;background:#ddd;display:table-cell;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var gg="这是main.html变量";
function ggMM() {
console.log(gg);
}
function callIframeMethod() {
// js
document.getElementById("frame").contentWindow.test();
// jq
$("#frame")[0].contentWindow.test(); //用jquery调用需要加一个[0]
}
function callIframeField() {
// 以下两种方法可以达到同样的效果
console.log($("#frame")[0].contentWindow.ff);
console.log(frame.window.ff);
}
function callIframeHtml() {
// 以下两种方法可以达到同样的效果
console.log($("#frame")[0].contentWindow.$("#dd").val());
console.log(frame.window.$("#dd").val());
var t = document.getElementById('frame').contentWindow.document.getElementById('dd');
console.log(t);
// var t = document.getElementById('frame').contentWindow.document.getElementById('dd');
//console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);
//console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);
}
function giveParameter() {
$("#frame")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";
}
</script>
</head>
<body>
<a href="#" onClick="giveParameter();">参数传递</a>
<a href="#" onClick="callIframeMethod();">调用子iframe方法</a>
<a href="#" onClick="callIframeField();">调用子iframe变量</a>
<a href="#" onClick="callIframeHtml();">调用子iframe组件</a></br>
<iframe id="frame" name="frame" src="frame.htm" frameborder="0"></iframe>
<iframe id="newFrame" name="newFrame" src="newFrame.htm" frameborder="0"></iframe>
</body>
</html>
2.子页面
frame.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>frame</title>
<style type="text/css">
a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var ff="adfdasfdsafdsafdsaf";
function test() {
console.log($("#dd").val());
}
function callMainField() {
console.log(parent.gg);
}
function callMainMethod() {
parent.ggMM();
}
function callMainHtml() {
console.log(parent.$("#frame").attr("id"));
}
function getParameter() {
console.log(window.hellobaby);
}
function ss(){
console.log('这是frame方法');
console.log(ff)
}
</script>
</head>
<body>
<h1>frame</h1>
<a href="#" onClick="getParameter();">接受参数</a>
<a href="#" onClick="callMainMethod();">调用父级方法，并且打印父级变量</a>
<a href="#" onClick="callMainField();">调用主窗口变量</a>
<a href="#" onClick="callMainHtml();">调用子iframe组件</a>
<input id="dd" type="text" value="1111111111"/>
</body>
</html>
3.子页面中嵌套的页面
newFranme.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在frame里嵌套frame</title>
<style type="text/css">
input,a{display: block;line-height:30px;}
iframe{
float:left;
width:48%;height:250px;margin-top:40px;background:#abc;border:1px solid blue;
}
#newFrame2{ float:right; }
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var newFrame = {
name:'这是newFrame的变量值',
};
function callLevelFrame() {
var ff=parent.$("#frame")[0].contentWindow.ff;
parent.$("#frame")[0].contentWindow.ss();
console.log('parent.$("#frame")[0].contentWindow.ff: '+ff);
}
function callLevelFrame1() {
console.log($("#newFrame1")[0].contentWindow.iframe1);
}
function frameFn(){
console.log('这是frame里面的方法franmeFn');
}
$(function(){
// setTimeout(function(){
// // console.log(parent.$("#frame"))
// // console.log(parent.$("#frame")[0].contentWindow.ss())
// // console.log(parent.document.getElementById('frame').contentWindow.ss());
// },500)
})
</script>
</head>
<body>
<h1>newFrame</h1>
<a href="#" onClick="callLevelFrame();">调用兄弟iframe</a>
<a href="#" onClick="callLevelFrame1();">调用自己的子页面iframe1变量</a>
<input id="nn" type="text" value="sdafsdfsa"/>
<iframe id="newFrame1" name="newFrame1" src="newFrame1.htm" frameborder="0"></iframe>
<iframe id="newFrame2" name="newFrame2" src="newFrame2.htm" frameborder="0"></iframe>
</body>
</html>
4.子页面的子页面中嵌套的页面
newFram1.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>newFrame1</title>
<style type="text/css">
a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var iframe1 = '我是iframe1的变量';
function callnewFramFn() {
// js
parent.parent.document.getElementById('newFrame').contentWindow.frameFn();
// jq
parent.parent.$("#newFrame")[0].contentWindow.frameFn();
}
function callnewFramParam(){
console.log(parent.parent.document.getElementById('newFrame').contentWindow.newFrame);
}
// $(function(){
// setTimeout(function(){
// // console.log(parent.parent.$("#newFrame")[0])
// // console.log(parent.$("#newFrame")[0].contentWindow.ss())
// // console.log(parent.document.getElementById('newFrame').contentWindow.ss());
// },500)
// })
function frame1(){
console.log(iframe1);
parent.$("#newFrame2")[0].contentWindow.$('#nn2').val(iframe1);
}
</script>
</head>
<body>
<h1>newFrame1</h1>
<a href="#" onClick="callnewFramFn();">调用newFram方法</a>
<a href="#" onClick="callnewFramParam();">调用newFram变量</a>
<input id="nn" type="text" value="这是newFrame1的input值"/>
</body>
</html>
5.子页面的子页面中嵌套的页面
newFram2.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>newFrame1</title>
<style type="text/css">
a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var iframe1 = '我是iframe2的变量';
function callnewFramFn1() {
parent.$("#newFrame1")[0].contentWindow.frame1();
console.log(parent.$('#newFrame1'));
}
</script>
</head>
<body>
<h1>newFrame2</h1>
<a href="#" onClick="callnewFramFn1();">调用newFram1方法</a>
<input id="nn2" type="text" value="这是newFrame1的input值"/>
</body>
</html>
标签：function,console,log,parent,frame,jq,js,contentWindow,iframe 来源： https://www.cnblogs.com/hzb462606/p/11417799.html