zoukankan      html  css  js  c++  java
  • window.open跨页面传输

    如果使用过移动端编写过混合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>
  • 相关阅读:
    树形地铁系统[树的最小表示]
    156. 矩阵[二维的hash]
    兔子与兔子
    滑动窗口【单调队列入门题】
    【YBTOJ】生日相同
    【YBTOJ】移位包含
    【YBTOJ】【HDUOJ 3085】逃离噩梦
    【YBTOJ】立体推箱子
    【CodeForces 1408F】Two Different
    【Luogu P3338】[ZJOI2014]力
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/6637039.html
Copyright © 2011-2022 走看看