window.showModalDialog与window.open()使用

头像
Corwien
    阅读 6 分钟
    1
    window.showModalDialog 有些浏览器不兼容，尝试用window.open() 封装替代，需要打开子窗口后向父窗口传递数据。
    
<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<head></head>
<title>Test dialog</title>

 <input name="selbtn1" type="button" id="selbtn1" onclick="select_Dialog();" value="选择" class="button"/>
<script> 

//选择
function select_Dialog(){

    var returnRes=Dialog('layer.html','window',800,600);
    /*
    if(returnRes)
    {
        var returnArr=returnRes.split("+");
        document.getElementById('kh_id').value=returnArr[0];
        document.getElementById('kh_id_txt').value=returnArr[1];
        document.getElementById('zk').value=returnArr[2];
    }
    */
}

function modalDialog(url, name, width, height){
    if (width == undefined){
        width = 400;
    }
    if (height == undefined){
        height = 300;
    }
    
    if (window.showModalDialog){
        window.open(url,name, 'width=' + (width) + 'px; height=' + (height) + 'px; edge:raised;resizable:yes;scroll:yes;status:no;center:yes;help:no;minimize:yes;maximize:yes;');
    }else{
        x = (window.screen.width - width) / 2;
        y = (window.screen.height - height) / 2;
    
        window.open(url, name, 'height='+height+', width='+width+', left='+x+', top='+y+', toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, modal=yes');
    }
}

function Dialog(url,name,width,height)
{
    //  测试
     // return showModalDialog(url, name, 'dialogWidth:'+w+'px; dialogHeight:'+h+'px; help: no; scroll: yes; status: no');
     // 
         if (window.showModalDialog)
         {
           window.open(url,name, 'width=' + (width) + 'px; height=' + (height) + 'px; edge:raised;resizable:yes;scroll:yes;status:no;center:yes;help:no;minimize:yes;maximize:yes;');
       }
       else
       {
         x = (window.screen.width - width) / 2;
         y = (window.screen.height - height) / 2;
    
        window.open(url, name, 'height='+height+', width='+width+', left='+x+', top='+y+', toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, modal=yes');
    }
 }

</script> 


</html>

    子窗口返回数据：

    window.returnvalue

    window.open 代替showModalDialog

    页面A.htm 用 window.open方式弹出页面 B.htm 。
    在页面B.htm上选择一个值，确定关闭窗口后将选择的这个值返回到父窗口A.htm。
    A.htm得到返回的值后，给本页面上的文本框赋值。

    A.html

    
<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<head></head>
<title>Test dialog</title>

<form name="form1" action="">  
  <input name="feild1" id='field1'>  
  <input name="feild2">  
</form>  

<input name="selbtn1" type="button" id="selbtn1" onclick="select_Dialog();" value="选择" class="button"/>


<script> 

function select_Dialog(){
    var height = 300;  
var width = 500;  
var url = "B.html";  
  
var winOption = "height=" + height + ",width=" + width + ",top=50,left=50,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,fullscreen=0";  
window.open(url, window, winOption);  

}




function sele(NO){ //NO为返回值  
   
     var re= new Array();//如果需返回多个变量，则采用数组把各个变量分开  
     re=NO.split(",");  

     $("input[name='feild1']").val(re[0]);
     $("input[name='feild2']").val(re[1]);
     

   
}  

</script> 


</html>

    B.html

    
<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<head></head>
<title>B </title>

<input type="button" value="返回值" onclick="re('Hello,hahah')">  


<script> 

function re(NOre){  
     var NOre = "5,6";

     // 在B页面调用 A页面方法
     window.opener.sele(NOre);  
     
     // 或者直接在子页面给父页面赋值
     // window.opener.document.getElementById("field1").value=name;
     window.close();
}  

</script> 


</html>

    另外一个封装方法

    modal.js

    var has_showModalDialog = !!window.showModalDialog;//定义一个全局变量判定是否有原生showModalDialog方法
if(!has_showModalDialog &&!!(window.opener)){        
    window.onbeforeunload=function(){
        window.opener.hasOpenWindow = false;        //弹窗关闭时告诉opener：它子窗口已经关闭
    }
}
//定义window.showModalDialog如果它不存在
if(window.showModalDialog == undefined){
    window.showModalDialog = function(url,mixedVar,features){
        if(window.hasOpenWindow){
            alert("您已经打开了一个窗口！请先处理它");//避免多次点击会弹出多个窗口
            window.myNewWindow.focus();
        }
        window.hasOpenWindow = true;
        if(mixedVar) var mixedVar = mixedVar;
        //因window.showmodaldialog 与 window.open 参数不一样，所以封装的时候用正则去格式化一下参数
        if(features) var features = features.replace(/(dialog)|(px)/ig,"").replace(/;/g,',').replace(/\:/g,"=");
        //window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no");
        //window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); 
        var left = (window.screen.width - parseInt(features.match(/width[\s]*=[\s]*([\d]+)/i)[1]))/2;
        var top = (window.screen.height - parseInt(features.match(/height[\s]*=[\s]*([\d]+)/i)[1]))/2;
        window.myNewWindow = window.open(url,"_blank",features);
    }
}

    A.html 父页面

    
<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./modal/modal.js"></script>
<head>
    <meta charset="utf-8">
</head>
<title>Test dialog</title>

<div id="content"> 内容哈哈哈 </div>

<input name="selbtn1" type="button" id="selbtn1" onclick="select_Dialog();" value="选择" class="button"/>


<script> 

function select_Dialog(){

    url = "B.html";
    var hotelIdList = window.showModalDialog(url, "hotel", "dialogWidth:1020px;dialogHeight:500px;help:no;resizable:no;center:yes;scroll:yes;status:no");  
    if(!has_showModalDialog) return;//chrome 返回 因为showModalDialog是阻塞的 open不一样;    
    $("#content").append(hotelIdList);  
}


function selectHotelChrome(option){//为打开的窗口定义方法，让打开的窗口关闭时通过window.opener赋值回来并执行  
    $("#content").append(option);  
}  

</script> 


</html>

    B.html页面：

    
<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
    <meta charset="utf-8">
</head>
<title>B </title>

<input type="button" value="返回值" onclick="chooseHotels('Test modal pop')">  


<script> 

function chooseHotels(msg) {  
    /* 
    *省略了自己的业务....... 
    */  
    var contentIds = msg;
    if (window.opener != undefined) { //forchrome   
        window.opener.selectHotelChrome(contentIds); //关闭前调用父窗口方法  
    }    
    else {    
        window.returnValue = contentIds;  
    }  
    window.close();  
}  

</script> 


</html>

    相关文章：
    高版本chrome不再支持window.showmodaldialog 的临时替换方案【用window.open】

    Microsofthtmlwindows
    Corwien
    6.3k 声望1.6k 粉丝

    为者常成，行者常至。

    « 上一篇
    Mysql 事务及数据的一致性处理
    下一篇 »
    Java学习笔记7-网络编程

    引用和评论

    推荐阅读
    头像
    CDH6 离线安装

    Corwien赞 2阅读 3.8k

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    如何在windows中我的电脑下添加一个程序启动入口

    热饭班长赞 3阅读 1.4k

    头像
    html如何实现跳转到锚点

    大发明家赞 2阅读 277

    头像
    浅谈sessionStorage的"继承"问题

    aqiongbei赞 2阅读 5.8k

    头像
    Thymeleaf的使用

    zZ_jie赞 3阅读 269

    头像
    使用flex布局解决经典布局中overflow必须设置高度才能滚动问题

    smallStone阅读 7.4k

    0 条评论
    得票最新