js模式化窗口問題![window.dialogArguments]
前些天做項(xiàng)目時(shí)遇到了個(gè)瀏覽器兼容問題,解決后記錄一下,也將模式化的資料放上!
詳細(xì)問題描述:
在火狐瀏覽器中彈出一個(gè)子窗口,子頁面中是一個(gè)分頁,點(diǎn)下一頁后子頁面會刷新,然后window.dialogArguments對象就丟失了,alert輸出顯示undefined [解決方法見第三項(xiàng)]
最近做網(wǎng)站的時(shí)候需要用到模式化窗口功能,也遇到了一些問題,所以查了查資料以解決
1.彈出窗口幾種方法:
a.window.open(pageURL,name,parameters);
b.window.showModalDialog()方法用來創(chuàng)建一個(gè)顯示HTML內(nèi)容的模態(tài)對話框(IE 4+支持)
c.window.showModelessDialog()方法用來創(chuàng)建一個(gè)顯示HTML內(nèi)容的非模態(tài)對話框(IE 5+支持)
2.顯示樣式問題:所用到的是window.showModalDialog(),此方法彈出的窗口在IE6下顯示比IE7 ,IE8 下高度要小點(diǎn),所以你可以寫個(gè)js 解決這點(diǎn)(IE6下高度需要+35PX左右, dialogLeft 屬性可以根據(jù)屏幕寬度設(shè)置)
代碼片段如下:
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窗口中需要分頁顯示數(shù)據(jù),點(diǎn)擊頁面中的信息,獲取分頁數(shù)據(jù)的ID,傳給彈出的父窗口。在IE下運(yùn)行很正常,但在FireFox 3.0中運(yùn)行時(shí),如果頁面不跳轉(zhuǎn)則可以正常的調(diào)用window.dialogArguments,若頁面一跳轉(zhuǎn)則會丟失window.dialogArguments的引用
現(xiàn)給出2種解決方法:
a.將showModalDialog窗口的頁面放在frameset或者iframe里面,進(jìn)行一次包裝。
例:
window.showModalDialog("test.aspx");
test.aspx 頁面內(nèi)容
<frameset cols="0,*"> <frame src=""/> <frame src="分頁顯示數(shù)據(jù)的頁面"/> </frameset>
頁面返回方法變成
function returnValue(flag) { var myObj = window.parent.dialogArguments; myObj.value = flag; window.parent.close(); }
這樣就可以拿到返回的值了
b. 如果不想多弄出來個(gè)頁面,可以用下面的方法,此方法可以用到了window.opener.document 對象,此對象IE7,IE8貌似都不支持(本人測試過,不知道在你機(jī)器上咋樣),判斷下是什么瀏覽器,然后給父頁面的隱藏域賦值,然后父頁面再處理;
代碼如下:
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(); } }
基本所遇到問題均已經(jīng)解決,關(guān)于父頁面與子頁面?zhèn)髦悼梢远鄥㈤喥渌Y料
- 在html中引入外部js文件,并調(diào)用帶參函數(shù)的方法
- python 把數(shù)據(jù) json格式輸出的實(shí)例代碼
- jsp 網(wǎng)站引入外部css或者js失效問題解決
- js學(xué)習(xí)筆記之事件處理模型
- 原生js代碼實(shí)現(xiàn)圖片放大境效果
- JS給Array添加是否包含字符串的簡單方法
- 淺談js對象屬性 通過點(diǎn)(.) 和方括號([]) 的不同之處
- 淺談js繼承的實(shí)現(xiàn)及公有、私有、靜態(tài)方法的書寫
- js基礎(chǔ)之DOM中document對象的常用屬性方法詳解
- Javascript 動態(tài)改變imput type屬性
相關(guān)文章
js中判斷Object、Array、Function等引用類型對象是否相等
項(xiàng)目中有時(shí)會需要對引用類型進(jìn)行比較,如常見的object和array,我們知道,引用類型無法直接使用 == 或=== 取得期待結(jié)果,因此需要一個(gè)迭代的compare函數(shù)轉(zhuǎn)化成原始類型進(jìn)行比較2012-08-08巧用js提交表單輕松解決一個(gè)頁面有多個(gè)提交按鈕
使用js提交表單想必大家都會,如果要實(shí)現(xiàn)一個(gè)頁面有多個(gè)提交按鈕,你會嗎?下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-11-11JS實(shí)現(xiàn)的RGB網(wǎng)頁顏色在線取色器完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的RGB網(wǎng)頁顏色在線取色器,結(jié)合完整實(shí)例形式分析了基于JS運(yùn)算及鼠標(biāo)事件響應(yīng)來操作頁面元素實(shí)現(xiàn)取色器功能的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12JavaScript中async/await的高級用法小結(jié)
JavaScript的異步編程已經(jīng)從回調(diào)(Callback)演進(jìn)到Promise,再到如今廣泛使用的async/await語法,本文為大家整理了7個(gè)async/await高級用法,希望對大家有所幫助2023-12-12