window.open跨页面传输

最新推荐文章于 2023-02-13 20:46:52 发布

躲不过这哀伤

最新推荐文章于 2023-02-13 20:46:52 发布

阅读量177

点赞数

原文链接：http://www.cnblogs.com/zhangzhicheng/p/6637039.html

版权

如果使用过移动端编写过混合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>