window.open + postMessage实现打开弹框,并且在子页面接收参数,亲测有效

父页面写法:

    // 要打开的页面地址   
    var url = "http://127.0.0.1/demo";
    // 样式
    var sFeatures = "dialogWidth:490px;dialogHeight:310px;scroll:no;status:no;";
    // 参数
    var arg= new Object();
    arg.id = "1";
    arg.name = "zhangsan";

    // 打开子窗口
	window.popupwin  = window.open(url, vArguments, sFeatures);
    
    // 监听到子页面的message消息后,向子页面发送参数(子窗口打开后,会向当前窗口发送message消息,当前窗口监听到子窗口发送的消息后,向子窗口发消息)
	window.addEventListener('message', function (e) {
		window.popupwin.postMessage({type:'message', 'vArguments':vArguments}, '*');
	})

子页面写法:

<script language="javascript" type="text/javascript">

        // 获取父页通过postMessage面传过来的参数,在DOM加载完成时执行
		jQuery(function(){
            // 向父页面发消息,触发父页面的监听事件,父页面就会给子页面发参数
            window.opener.postMessage({type:'start', 'message':'start'}, '*');

            // 监听父页面发送的message消息,获取参数
            console.log("get postMessage args...");
            window.addEventListener('message', function (e) {  // 监听 message 事件
                console.log("postMessage type:" + e.data.type);
                console.log("postMessage args:" + e.data.vArguments);
                window.parentArg = e.data.vArguments;
            });

		});
</script>

思路:在子窗口的DOM加载完成后,向父页面发消息,父页面监听到子页面发送的消息后,父页面给子页面发参数。然后子页面通过监听获得父页面发送的message消息,从而获取到父页面发送的参数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值