ifream的window和document使用
- ifream到上一层窗口
- 代码部分
- 方法：使用window.parent.location.href
- 传递数据（ifreame到父级窗口）
- contentWindow的使用
- 跨域传递参数
ifream到上一层窗口
思路：
1.修改顶层窗口的href为ireame的url
2.修改顶层窗口的document为ifream的document
代码部分
方法：使用window.parent.location.href
修改父级的href
window.parent.location.href
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<style>
*{
margin:0;
padding:0;
}
body{
width:100vw;
height: 100vh;
}
</style>
<body>
<p>ifream窗口</p>
<button onclick="test()">ifream跳出</button>
</body>
<script type="text/javascript">
function test(){
window.parent.location.href='http://127.0.0.1:8848/temp_file/child.html'
}
</script>
</html>调用ifream的网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>home</title>
</head>
<style>
*{
margin:0;
padding:0;
}
body{
width:100vw;
height: 100vh;
}
.child{
position: absolute;
width: 100%;
height: 100%;
}
</style>
<body>
<p>父级窗口</p>
<div class="box">
<iframe src="child.html" class="child" id='iframe1'></iframe>
</div>
</body>
</html>
传递数据（ifreame到父级窗口）
contentWindow的使用
思路：传递window对象
ifream的html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<style>
*{
margin:0;
padding:0;
}
body{
width:100vw;
height: 100vh;
}
</style>
<body>
<p>ifream窗口</p>
<button onclick="test()">ifreaamwindow</button>
<p>发送的数据：windwo.postMapdata={name:'yma16'}<p>
</body>
<script type="text/javascript">
function test(){
window.postData={name:'yma16',pwd:'life'}
}
</script>
</html>调用ifream的html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>home</title>
</head>
<style>
*{
margin:0;
padding:0;
}
body{
width:100vw;
height: 100vh;
}
.child{
position: absolute;
width: 100%;
height: 100%;
}
</style>
<body>
<p>父级窗口</p>
<button onclick="getchild()">获取ifream的window</button>
<hr>
<p>父级数据显示</p>
<input type="text" value='' id="parent_input" />
<hr>
<div class="box">
<iframe src="child.html" class="child" id='iframe1'></iframe>
</div>
</body>
<script type="text/javascript">
function getchild(){
document.getElementById('parent_input').value=JSON.stringify(document.getElementById('iframe1').contentWindow.postData)
console.log("获取ifream的windows和documnet",document.getElementById('iframe1'));
console.log('ifream的window',document.getElementById('iframe1').contentWindow)
console.log('ifream的window的postMapData',document.getElementById('iframe1').contentWindow.postData)
console.log('ifream的document',document.getElementById('iframe1').contentDocument)
}
</script>
</html>
跨域传递参数
ifreame界面，使用window.parent.postMessage(data,‘ip+port’)
window.parent.postMessage(data,'*')父级窗口添加监听事件获取数据
window.addEventListener('message',this.listenIfreame())
listenIfreame:function(e){
console.log('message',e,e.data);
}