English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
A few days ago, I encountered a browser compatibility issue while working on a project. After solving it, I will record it and also put up the information on modalization!
Detailed description of the problem:
When popping up a child window in the Firefox browser, the child page is a pagination. After clicking the next page, the child page will refresh, and then the window.dialogArguments object is lost, alert output displays undefined [Solution see item 3]
While working on a website recently, I needed to use the modal window feature and encountered some issues, so I looked up some information to solve them
1Several methods to pop up a window:
a.window.open(pageURL,name,parameters);
The b.window.showModalDialog() method is used to create a modal dialog that displays HTML content (IE 4+is supported)
The c.window.showModelessDialog() method is used to create a non-modal dialog that displays HTML content (IE 5+is supported)
2.Display style issue: The method used is window.showModalDialog(), the popped window of this method in IE6below shows more than IE7 ,IE8 The height below needs to be smaller, so you can write a js to solve this point (IE6The height below needs+35PX to the left and right, the dialogLeft attribute can be set according to the screen width)
The code snippet is as follows:
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; //Pop-up method if(url.indexOf("?")<0){window.showModalDialog(url+'?setTime='+newDate().getTime(),obj,windowStatus);} else{window.showModalDialog(url+'&setTime='+newDate().getTime(),obj,windowStatus);}
3.The dialogArguments object lost problem in FF browser: It is necessary to display the data in the showModalDialog window, click the information in the page, get the ID of the pagination data, and pass it to the popped parent window. It runs normally under IE, but in FireFox 3.0 runtime, if the page does not jump, it can normally call window.dialogArguments, if the page jumps, the reference of window.dialogArguments will be lost
Now give2A solution method:
a. Place the showModalDialog window page inside a frameset or iframe for a wrap.
Example:
window.showModalDialog("test.aspx");
Content of test.aspx page
<frameset cols="0,*"> <frame src=""/> <frame src="The page for displaying the data"/> </frameset>
The page return method becomes
function returnValue(flag) { var myObj = window.parent.dialogArguments; myObj.value = flag; window.parent.close(); }
In this way, you can get the returned value
b. If you don't want to create an extra page, you can use the following method, which uses the window.opener.document object, which is IE7, Internet Explorer8It seems that it is not supported (I have tested it, and I don't know how it works on your machine), judge what browser it is, then assign the value to the hidden field of the parent page, and then the parent page handles it;
The code is as follows:
function returnValue(flag) { document.getElementById("rValue").value=flag; if (window.ActiveXObject) //Internet Explorer Browser { 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(); } }
Most common problems have been solved, for passing values between parent and child pages, you can refer to other materials more often