zoukankan      html  css  js  c++  java
  • 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的运行效果。

  • 相关阅读:
    Atlas+Keepalived系列一:安装Atlas:
    MySQL查看当前的连接信息
    MySQL replicate-ignore-db详解
    MongoDB 进程控制系列二:结束进程
    MongoDB 进程控制系列一:查看当前正在执行的进程
    MySQL 大致测试更新时间
    MySQL SELECT 执行的具体步骤
    MongoDB副本集配置系列七:MongoDB oplog详解
    MySQL 分区
    微软BI 之SSIS 系列
  • 原文地址:https://www.cnblogs.com/wishyouhappy/p/3663562.html
Copyright © 2011-2022 走看看