window.showModalDialog与window.open()使用

hzc 发布于2019-08-06 10:56 / 564人阅读

摘要：有些浏览器不兼容，尝试用封装替代，需要打开子窗口后向父窗口传递数据。在页面上选择一个值，确定关闭窗口后将选择的这个值返回到父窗口。

window.showModalDialog 有些浏览器不兼容，尝试用window.open() 封装替代，需要打开子窗口后向父窗口传递数据。





Test dialog

子窗口返回数据：

window.returnvalue

window.open 代替showModalDialog

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

A.html





Test dialog

B.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 父页面





    

Test dialog

 内容哈哈哈

B.html页面：

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

服务器托管私有云 window open 使用心得与技巧 mysql安装与使用域名绑定与使用详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/61192.html

window.showModalDialog与window.open()使用

摘要：有些浏览器不兼容，尝试用封装替代，需要打开子窗口后向父窗口传递数据。在页面上选择一个值，确定关闭窗口后将选择的这个值返回到父窗口。 window.showModalDialog 有些浏览器不兼容，尝试用window.open() 封装替代，需要打开子窗口后向父窗口传递数据。 Test dialog //选择 function select_Dialog(){ ...

TZLLOG 2019-08-01 18:14 评论0 收藏0
JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录

摘要：坑无视和是十分特殊的事件，要求事件处理函数内部不能阻塞当前线程，而却恰恰就会阻塞当前线程，因此规范中以明确在和中直接无视这几个方法的调用。前言最近实施的同事报障，说用户审批流程后直接关闭浏览器，操作十余次后系统就报用户会话数超过上限，咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端，否则必然会超出会话上限。即使在页面上增添一个登出按钮也无法保证用户不会直接关掉浏览器...

Chiclaim 2019-08-19 18:43 评论0 收藏0
前端硬核面试专题之 HTML 24 问

摘要：前言本文讲解前端面试的的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累注意文章的题与题之间用下划线分隔开，答案仅供参考。返回当前文档的标题。改用则可以进行针对性的和避免不必要的。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 1. 前言本文讲解前端面试的 HTML 的内容。复习前端面...

honhon 2019-08-26 10:37 评论0 收藏0
JavaScript BOM——“window 对象”的注意要点

摘要：仅限数值表示新窗口的高度。一个字符串参数，并将其显示给用户，提供两个按钮，一个按钮返回布尔值另一个按钮返回布尔值。全局作用域 window 在是BOM 的核心对象，他是浏览器的一个实例。在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。如： var age = 18; function sayAge(){ console.log(window.age);...

levius 2019-08-19 17:08 评论0 收藏0
《JavaScript 闯关记》之 BOM

摘要：对象的核心对象是，它表示浏览器的一个实例。及更高版本不会抛出错误。与框架有关的最后一个对象是，它始终指向实际上，和对象可以互换使用。设置值说明或表示浏览器窗口是否最大化。仅限数值表示新窗口的高度。 ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问...

马忠志 2019-08-20 12:06 评论0 收藏0