美文网首页
多窗口如何实现数据的传递

多窗口如何实现数据的传递

作者: C_Y大渔 | 来源:发表于2017-07-03 14:17 被阅读0次

    在平时做web开发的时候关于消息传递,除了客户端与服务器传值还会遇到窗口与窗口之间如何实现数据传递的问题。

    以下是在项目的中使用过的几种方法,如有写的不准确的请见谅

    方法(1)

    html5 postMessage()

    · postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。

    · postMessage(data,origin)方法接受两个参数

    - data:要传递的数据,由于部分浏览器只能处理字符串参数,所以有时需要使用JSON.stringify()方法对对象参数序列化。

    - origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL(忽略)],这个参数可以具体设置成指定窗口(比较安全),也可以设置为"*"(表示可以传递给任意窗口),当然如果要指定窗口和当前窗口同源的话设置为"/"。********************************************************************************************************

    子窗口控制父级窗口

    1、在父级窗口

    //监听postMessage消息事件

    if (typeof window.addEventListener != 'undefined') {  

        window.addEventListener('message', onmessage, false);

    } else if (typeof window.attachEvent != 'undefined') {  

        window.attachEvent('onmessage', onmessage);

    }

    //消息处理函数

    var onmessage = function(e){

        if(e.data=="完成"){ 

               alert(12);

        }

    }

    2、在子级窗口

    window.frames[0].postMessage('完成','*');

    top.postMessage('完成','*');

    知识点:在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。

    注:window、self、window.self是等价的。

    方法(2)

    同域相互访问

    1、在父级窗口调用子级页面的函数PIframe()

    <iframe src="B.html" name="myframe" width="500" height="100"></iframe>

    window.myframe.PIframe();  (在Chrome不起左右);

    可以试着用

    $(ifream-id).contents().find((ID)).click();

    2、在子级窗口调用父级页面的函数fMain()

    parent.fMain(); 

    注意:必须开启服务

    相关文章

      网友评论

          本文标题:多窗口如何实现数据的传递

          本文链接:https://www.haomeiwen.com/subject/myyacxtx.html