在設計FireFox的對話框流程時,計劃使用彈出對話框來添加頁面和修改頁面,在添加和修改結束時,單擊提交後對話框關閉,隨後刷新列表窗口,下面是錯新技術頻道小編教你編寫適合的FireFox的對話框,一起進入下文了解一下吧!
但是在實際操作的時候發生了一個問題,IE的對話框技術,對FireFox是不支持的,怎麼才能做到既支持IE又支持FireFox的對話框呢?
還好,昨天在研究TinyMCE,裡面有支持FireFox的對話框技術可以藉鑑。
我寫的打開對話框的方法:
function popupDialog(url,width,height){
//showx = event.screenX - event.offsetX - 4 - 10 ; // + deltaX; 這段代碼只對IE有效,已經不用了
//showy = event.screenY - event.offsetY -168; // + deltaY; 這段代碼只對IE有效,已經不用了
var x = parseInt(screen.width / 2.0) - (width / 2.0);
var y = parseInt(screen.height / 2.0) - (height / 2.0);
var isMSIE= (navigator.appName == "Microsoft Internet Explorer"); //判斷瀏覽器
if (isMSIE) {
retval = window.showModalDialog(url, window, "dialogWidth:"+width+"px; dialogHeight:"+height+"px; dialogLeft:"+x+"px; dialogTop:"+y+"px; status:no; directories:yes;scrollbars:no;Resizable=no; " );
} else {
var win = window.open(url, "mcePopup", "top=" + y + ",left=" + x + ",scrollbars=" + scrollbars + ",dialog=yes,modal=yes,width=" + width + ",height=" + height + ",resizable=no" );
eval('try { win.resizeTo(width, height); } catch(e) { }');
win.focus();
}
}
在被打開的對話框裡,我是用了上下分Frame的頁面,因為在 IE裡,對話框是不可以提交的,但是分成Frame後,就可以提交了。
在提交的按鈕上,加上這段代碼:
function doReload(){
var isMSIE= (navigator.appName == "Microsoft Internet Explorer");
if (isMSIE){
parent.dialogArguments.location.reload();
}else{
parent.opener.document.location.reload();
}
top.close();
}
兩種瀏覽器的打開對話框的方式不一樣
IE:window.showModalDialog(url, window, "dialogWidth:300px; dialogHeight:300px; dialogLeft:200px; dialogTop:200px; status:no; directories:yes;scrollbars:no;Resizable=no; " );
FireFox: window.open(url, "mcePopup", "top=200,left=200,scrollbars=no,dialog=yes,modal=yes,width=300,height=300,resizable=no" );
關閉窗口時:
IE: parent.dialogArguments.location.reload();
FireFox:parent.opener.document.location.reload();
還有一個很重要的注意點。 FireFox好像不支持對話框的window.close();
所以最後使用的關閉窗口用的是 top.close(); 這個IE、FireFox都支持。
以上是教你編寫適合的FireFox的對話框,更多內容請繼續關注錯新技術頻道其它相關文章!