前些天做項目時遇到了個浏覽器兼容問題,解決後記錄一下,也將模式化的資料放上!
詳細問題描述:
在火狐浏覽器中彈出一個子窗口,子頁面中是一個分頁,點下一頁後子頁面會刷新,然後window.dialogArguments對象就丟失了,alert輸出顯示undefined [解決方法見第三項]
最近做網站的時候需要用到模式化窗口功能,也遇到了一些問題,所以查了查資料以解決
1.彈出窗口幾種方法：
a.window.open(pageURL,name,parameters);
b.window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框(IE 4+支持)
c.window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框(IE 5+支持)
2.顯示樣式問題：所用到的是window.showModalDialog(),此方法彈出的窗口在IE6下顯示比IE7 ,IE8 下高度要小點,所以你可以寫個js 解決這點(IE6下高度需要+35PX左右, dialogLeft 屬性可以根據屏幕寬度設置)
代碼片段如下:
var swidth=window.screen.width;
if(parseInt(width)>swidth)
swidth=100;
else
swidth=(swidth-parseInt(width))/2;
varwindowStatus="dialogWidth:"+width+"px;dialogHeight:"+height+"px;dialogTop:80px;dialogLeft:"+swidth+"px;center:1;status:no;scroll:no;resizable:no;help:no;";
//彈出方法
if(url.indexOf("?")<0){window.showModalDialog(url+'?setTime='+newDate().getTime(),obj,windowStatus);}
else{window.showModalDialog(url+'&setTime='+newDate().getTime(),obj,windowStatus);}
3.dialogArguments對象FF浏覽器中丟失問題： 彈出showModalDialog窗口中需要分頁顯示數據，點擊頁面中的信息,獲取分頁數據的ID,傳給彈出的父窗口。在IE下運行很正常，但在FireFox 3.0中運行時，如果頁面不跳轉則可以正常的調用window.dialogArguments，若頁面一跳轉則會丟失window.dialogArguments的引用
現給出2種解決方法：
a.將showModalDialog窗口的頁面放在frameset或者iframe裡面，進行一次包裝。
例：
window.showModalDialog("test.aspx");
test.aspx 頁面內容
<frameset cols="0,*"> <frame src=""/> <frame src="分頁顯示數據的頁面"/> </frameset>
頁面返回方法變成
function returnValue(flag)
{
var myObj = window.parent.dialogArguments;
myObj.value = flag;
window.parent.close();
}
這樣就可以拿到返回的值了
b. 如果不想多弄出來個頁面,可以用下面的方法，此方法可以用到了window.opener.document 對象，此對象IE7，IE8貌似都不支持（本人測試過，不知道在你機器上咋樣），判斷下是什麼浏覽器,然後給父頁面的隱藏域賦值，然後父頁面再處理;
代碼如下：
function returnValue(flag)
{
document.getElementById("rValue").value=flag;
if (window.ActiveXObject) //IE浏覽器
{
var myObj = window.dialogArguments;
//alert(myObj);
myObj.value = flag;
window.close();
}
else{
window.opener.document.getElementById("hid_oilid").value=flag;
window.opener.document.getElementById("txt_oil").value=flag+"號";
//self.close();
window.close();
}
}
基本所遇到問題均已經解決，關於父頁面與子頁面傳值可以多參閱其他資料