window.showModalDialog與window.open()使用

TZLLOG 發(fā)布于2019-08-01 18:14 / 2386人閱讀

摘要：有些瀏覽器不兼容，嘗試用封裝替代，需要打開子窗口后向父窗口傳遞數(shù)據(jù)。在頁面上選擇一個值，確定關閉窗口后將選擇的這個值返回到父窗口。

window.showModalDialog 有些瀏覽器不兼容，嘗試用window.open() 封裝替代，需要打開子窗口后向父窗口傳遞數(shù)據(jù)。





Test dialog

子窗口返回數(shù)據(jù)：

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：它子窗口已經(jīng)關閉
    }
}
//定義window.showModalDialog如果它不存在
if(window.showModalDialog == undefined){
    window.showModalDialog = function(url,mixedVar,features){
        if(window.hasOpenWindow){
            alert("您已經(jīng)打開了一個窗口！請先處理它");//避免多次點擊會彈出多個窗口
            window.myNewWindow.focus();
        }
        window.hasOpenWindow = true;
        if(mixedVar) var mixedVar = mixedVar;
        //因window.showmodaldialog 與 window.open 參數(shù)不一樣，所以封裝的時候用正則去格式化一下參數(shù)
        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】

GPU云服務器云服務器 window open 使用心得與技巧 mysql安裝與使用域名綁定與使用詳解

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51589.html

JS魔法堂:定義頁面的Dispose方法——[before]unload事件啟示錄

摘要：坑無視和是十分特殊的事件，要求事件處理函數(shù)內部不能阻塞當前線程，而卻恰恰就會阻塞當前線程，因此規(guī)范中以明確在和中直接無視這幾個方法的調用。前言 ?最近實施的同事報障，說用戶審批流程后直接關閉瀏覽器，操作十余次后系統(tǒng)就報用戶會話數(shù)超過上限，咨詢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 對象”的注意要點

摘要：僅限數(shù)值表示新窗口的高度。一個字符串參數(shù)，并將其顯示給用戶，提供兩個按鈕，一個按鈕返回布爾值另一個按鈕返回布爾值。全局作用域 window 在是BOM 的核心對象，他是瀏覽器的一個實例。在全局作用域中聲明的變量、函數(shù)都會變成window 對象的屬性和方法。如： var age = 18; function sayAge(){ console.log(window.age);...

levius 2019-08-19 17:08 評論0 收藏0
《JavaScript 闖關記》之 BOM

摘要：對象的核心對象是，它表示瀏覽器的一個實例。及更高版本不會拋出錯誤。與框架有關的最后一個對象是，它始終指向實際上，和對象可以互換使用。設置值說明或表示瀏覽器窗口是否最大化。僅限數(shù)值表示新窗口的高度。 ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（瀏覽器對象模型）則無疑才是真正的核心。BOM 提供了很多對象，用于訪問...

馬忠志 2019-08-20 12:06 評論0 收藏0