HTML父子页面通信问题（showModalDialog）

1. showModalDialog参数说明

window.showModalDialog(URL, ARGS,Features)（在父窗口中调用打开新的窗口）

URL -- 必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
ARGS　　　　　 -- 可选参数，类型：变体。向窗口中传递参数。在子窗口中使用window.dialogArguments来取得传递进来的参数。

Features　　　　-- 可选参数，类型：字符串。设置打开窗口的外观属性（height，width等）

　 Features详细属性说明：

　　 dialogHeight 对话框高度，不小于100px，IE4中dialogHeight 和 dialogWidth 默认的单位是em，而IE5中是px，为方便其见，在定义modal方式的对话框时，用px做单位。

　　 dialogWidth: 对话框宽度。
　　 dialogLeft: 距离桌面左的距离。
　　 dialogTop: 离桌面上的距离。
　　 center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　　 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　　 resizable: {yes | no | 1 | 0 } ［IE5＋］：是否可被改变大小。默认no。
　　 status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no [Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

2 使用例子

parent.html中js

    var orderData={

        orderCommet:orderCommet,

        email:email,

        pnumber:pnumber,

        cellnumber:cellnumber,

        ddetail:ddetail,

        dCity:dCity,

        sCity:sCity,

        sdetail:sdetail,

        pname:pname,

        startDate:startDate,

        leavetime:leavetime,

        serviceType:serviceType,

        driverUsernumber:driverUsernumber,

    };

window.showModalDialog("orderInfo.html",orderData,"height=600,width=700");

子窗口orderInfo.html中使用

    var args = window.dialogArguments;

    $("#serviceType").html(args.serviceType);

    $("#driverNumber").html(args.driverUsernumber);

    $("#sCity").html(args.sCity);

    $("#sDetail").html(args.sdetail);

    $("#startDate").html(args.startDate);

    $("#leavetime").html(args.leavetime);

    $("#pname").html(args.pname);

    $("#dCity").html(args.dCity);

    $("#ddetail").html(args.ddetail);

    $("#pnumber").html(args.pnumber);

    $("#cellnumber").html(args.cellnumber);

    $("#email").html(args.email);

    $("#orderComment").html(args.orderCommet);

3.问题总结

1）直接使用window.open能打开新的窗口，使用window.opener能够在子窗口中访问父窗口中内容

2）使用showModalDialog按F5刷新不管用，需配合reload使用（onkeydown="if (event.keyCode==116){reload.click()} 给reload函数中绑定页面，例如：<a id="reload" href="orderInfo.html" style="display:none">reload...</a>）

3）window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性（区别于window.showModelessDialog）

4) 被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。

秒客网

HTML父子页面通信问题（showModalDialog）

相关文章