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); }
