如果使用过移动端编写过混合app,一定会知道一些跨页面传输的方式,
但他们是怎么实现的,其实,原理一般是页面一定是先前就加载的,这样
你才可以实现跨页面传输,不是页面都不存在,连个方向都没有,怎么传输。
但今天这个不是一个实现移动端的,只是仿仿它,让人更加知道这个原理而已。
主要昨天看同事看一个慕课网时弹框登录居然是个新窗口,就好奇了,这个窗口和
窗口怎么实现传输的?
然后就欧了。window.open
window.open会返回一个被打开页面的对象
opener是被打开页面会有个opener对象指向打开的页面对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1.html</title> </head> <body> <h1>我是页面1</h1> <button id="btn1">click</button> <script> var oBtn=document.querySelector("#btn1"); var openWin; oBtn.onclick=function(){ openWin=window.open("./2.html","newwindow","width=500,height=500"); //当新窗口页面渲染加载完了,才会有你要获取它的页面的方法 openWin.onload=function(){ openWin.abc(); } } function html1(){ oBtn.style.background="#444"; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2.html</title> </head> <body> <h1>我是页面2</h1> <button id="btn1">click</button> <script> var oBtn=document.querySelector("#btn1"); function abc(){ document.body.style.background="red"; opener.html1(); } oBtn.onclick=function(){ opener.html1(); } </script> </body> </html>