• window.showDialog()兼容性处理


    ModalDialog 是什么?
    showModalDialog 是js window对象的一个方法, 和window.open一样都是打开一个新的页面。
    区别是: showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了)。
    可以在子窗口中通过设置 window.returnValue 的值,让父窗口可以获取这个return value.

    一个例子
    1)主窗口 main.html,
    2)在主窗口中通过showModalDialog的方式打开子窗口sub.html
    3)在子窗口中设置 returnValue返回给主窗口使用
    main.html
    [html] view plaincopy

        <HTML>    
        <HEAD>    
        <META NAME="GENERATOR" Content="oscar999">    
        </HEAD>    
        <script>  
        function showmodal()  
        {  
          var ret = window.showModalDialog("sub.html?temp="+Math.random());  
          alert("sub return value is "+ret);  
        }  
        </script>  
        <BODY>    
        <INPUT id=button1 type=button value="open sub" name=button1 onclick="showmodal();">    
        </BODY>    
        </HTML>  


    sub.html
    [html] view plaincopy

        <HTML>    
        <HEAD>    
        <META NAME="GENERATOR" Content="oscar999">    
        </HEAD>    
        <script>  
        function returnMain()  
        {  
          window.returnValue = "return from sub";  
          window.close();  
        }  
        </script>  
        <BODY>    
        <INPUT id=button1 type=button value="return and close" name=button1 onclick="returnMain()">    
        </BODY>    
        </HTML>  


    特别说明: 在main.html中showModalDialog的方法时, 有使用到Math.random()的目的是避免缓存。

    showModalDialog详细使用
    vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
     sURL
       必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
        vArguments
       可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
        sFeatures
       可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
        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。

    还有几个属性是用在HTA中的,在一般的网页中一般不使用。
        dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
        edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
        unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

    浏览器兼容
    但是并不是所有浏览器对兼容这样的用法。
    在Chrome中运行上面的例子的话, 父窗口可以任意获取焦点,效果和window.open一样, 而且获取的returnVale也是undefined.
    以下是各主流浏览器对此方法的支持状况。
    浏览器     是否支持     状态
    IE9     ○     
    Firefox13.0     ○     
    safari5.1     ○     
    chrome19.0     ×     并不是模态对话框,而是open了一个新窗体
    Opera12.0     ×     什么也发生,连个窗体都不弹

    如果有传入vArguments这个参数为window的话:
    [javascript] view plaincopy

        var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);  

    则在子窗口中,以下的值为:
    浏览器     模态对话框     window.opener     window.dialogArguments     returnValue
     IE9      ○      undefined      [object Window]      ○
     Firefox13.0      ○      [objectWindow]      [object Window]      ○
     safari5.1      ○      [objectWindow]      [object Window]      ○
     chrome19.0      ×      [objectWindow]      undefined      ×

    注意一下Firefox浏览器下,子窗体假如刷新的话window.dialogArguments照样会丢失,变成undefined。以上结果中我们可以看出返回值returnValue就只有chrome浏览器返回的是undefined,其他浏览器都没有问题

    如何解决Chrome的兼容问题。
    方向是: 设置window.opener.returnValue=""
    main.html

        <HTML>    
        <HEAD>    
        <META NAME="GENERATOR" Content="oscar999">    
        </HEAD>    
        <script>  
        function showmodal()  
        {  
          var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);  
          //for Chrome  
          if(ret==undefined)  
          {  
            ret = window.returnValue;  
          }  
          alert("sub return value is "+ret);  
        }  
        </script>  
        <BODY>    
        <INPUT id=button1 type=button value="open sub" name=button1 onclick="showmodal();">    
        </BODY>    
        </HTML>  


    sub.html

        <HTML>    
        <HEAD>    
        <META NAME="GENERATOR" Content="oscar999">    
        </HEAD>    
        <script>  
        function returnMain()  
        {  
          if(window.opener!=undefined)  
          {  
            window.opener.returnValue = "return from sub";   
          }else{  
            window.returnValue = "return from sub";  
          }  
          window.close();  
        }  
        </script>  
        <BODY>    
        <INPUT id=button1 type=button value="return and close" name=button1 onclick="returnMain()">    
        </BODY>    
        </HTML>  


    这里是判断某些对象是否为defined来区分浏览器。当然,也可以判断浏览器的类型的方式进行
    http://blog.csdn.net/oscar999/article/details/8272798

    这里是借用了父窗口的returnValue来使用, 如果父窗口的returnValue也用其他用途是可以使用替换的方式进行了, as:
    var oldValue  = window.returnValue;
    var newValue = showModalDialog()
    window.returnValue = oldValue


    需要特别注意的是,  Chrome下的测试需要把html 文件放入到web server(Tomcat,...)下通过http url 访问测试。否则就不成功了。

  • 相关阅读:
    .net软件开发工程师面试题
    html笔记
    好用软件
    谷歌插件
    vue笔记
    js笔记
    数组去重
    css全局样式
    css笔记
    vscod插件
  • 原文地址:https://www.cnblogs.com/roboot/p/4979750.html
Copyright © 2020-2023  润新知