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阅读 4.1k

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    头像
    面向企业级前端应用的开发框架 UI5 的发展简史介绍

    注销赞 5阅读 7.8k

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

    大发明家赞 2阅读 4.2k

    头像
    这些年

    注销赞 2阅读 4k

    头像
    一个用JavaScript生成思维导图(mindmap)的github repo

    注销赞 1阅读 6.2k

    0 条评论
    得票最新