谷歌浏览器非模态对话框的创建和jQuery子窗口如何给父窗口传值

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jintingbo/article/details/82317362

谷歌浏览器不支持模态对话框了,而原来的项目中,又使用了模态对话框的语句:showModalDialog,这样原来的项目就用不成模态对话框了。 

为了不对项目做大的改变,只好写一个临时的showModalDialog函数,代替原来的对话框。

第一步:写一个判断浏览器还能否使用showModalDialog的代码

           $(function(){
                if(window.showModalDialog == undefined) {
                    window.showModalDialog = function(url, mixedVar, features) {
                        window.hasOpenWindow = true;
                        if(mixedVar) 
                            var mixedVar = mixedVar;
                        if(features) 
                            var features = features.replace(/(dialog)|(px)/ig, "").replace(/;/g, ',').replace(/\:/g, "=");
                        window.myNewWindow = window.open(url, "_blank", features);
                    }
                }
            })

------------------

第二步:写一个对话框的调用代码

            $(function(){

                $("#dlg").click(function(){
                    var iWidth = 500;
                    var iHeight = 300;
                    var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
                    var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
                    var win = window.showModalDialog("b.html", "弹出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",status=no;help=no;scrollbars=no");
                    $('#p1t').val(win);
                });
            });

如果想传入多个值,可以使用json数据的格式:

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

            function a() {
                var couponName = $('#backname').val();
                var v={name:couponName,w:12345};         //在这里写一个json,作为要回传的值,这样就可以传多值了。
                if(window.opener != undefined) {
                    //for chrome
                    window.opener.returnValue = v;
                } else {
                    window.returnValue = v;
                }
                window.opener.document.getElementById('p1t').value=v.w;
                window.opener.aa();
                window.close();

            }
        </script>

-------------------

第三步:在子窗口中写一个写主窗口值的函数

            function a() {
                var couponName = $('#backname').val();                
                if(window.opener != undefined) {
                    //for chrome
                    window.opener.returnValue = couponName;
                } else {
                    window.returnValue = couponName;
                }
                window.opener.document.getElementById('p1t').value=couponName;
                window.close();

            }

--------------------------

完整主窗口代码如下:

<html>

    <head>
        <meta charset="utf-8" />
        <title>无标题页</title>
        <script src="js/jquery-3.2.1.js"></script>
        <script language="javascript" type="text/javascript">
            $(function(){
                if(window.showModalDialog == undefined) {
                    window.showModalDialog = function(url, mixedVar, features) {
                        window.hasOpenWindow = true;
                        if(mixedVar) 
                            var mixedVar = mixedVar;
                        if(features) 
                            var features = features.replace(/(dialog)|(px)/ig, "").replace(/;/g, ',').replace(/\:/g, "=");
                        window.myNewWindow = window.open(url, "_blank", features);
                    }
                }
            })

            $(function(){

                $("#dlg").click(function(){
                    var iWidth = 500;
                    var iHeight = 300;
                    var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
                    var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
                    var win = window.showModalDialog("b.html", "弹出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",status=no;help=no;scrollbars=no");
                    $('#p1t').val(win);
                });
            });

        </script>
    </head>

    <body>
        <form name="form1" action="#">
            <input type="text" name="p1t" id="p1t" />
            <input type="button" value="打开对话框" name="dlg" id="dlg" />
        </form>
    </body>

</html>

---------------------------

完整子窗口的代码如下:

<html>

    <head>
        <meta charset="utf-8" />
        <title>无标题页</title>
        <script src="js/jquery-3.2.1.js"></script>
        <script language="javascript" type="text/javascript">

            function a() {
                var couponName = $('#backname').val();                
                if(window.opener != undefined) {
                    //for chrome
                    window.opener.returnValue = couponName;
                } else {
                    window.returnValue = couponName;
                }
                window.opener.document.getElementById('p1t').value=couponName;
                window.opener.aa();//子页面调用父页面的方法
                window.close();

            }
        </script>
    </head>

    <body>
        <form name="form1" action="">
            <input type="text" value="输入要传的值" name="backname" id="backname">
            <input type="button" value="传值" onclick="a()">
        </form>
    </body>

</html>

-----------------------------

相关资料:

window.opener是什么?
A窗口打开了B窗口,那么在B窗口的window.opener语句就是指A窗口。

即:window.opener 返回的是创建当前窗口的那个父窗口的引用
它与parent的区别是,  window.opener仅仅是指窗口而言,而parent是指上级平台,内容比窗口要丰富的多。
子页面要向父页面传值,只要在document前面加window.opener即可,比如:

window.opener.document.getElementById('p1t').value=“12345678”;

在B页面中 window.opener.document.getElementById("A页面的id").innerHTML="<table>html</table>";自己写吧。

猜你喜欢

转载自blog.csdn.net/jintingbo/article/details/82317362
今日推荐