Home >
Web Front-end >
JS Tutorial >
Manipulating the parent window object in JavaScript child window ModalDialog_Basic knowledge
Manipulating the parent window object in JavaScript child window ModalDialog_Basic knowledge
WBOY
Release: 2016-05-16 17:46:55
Original
1428 people have browsed it
Operating the parent window object in ModalDialog 1. You cannot use window.parent Window.parent is used to operate in the frame, but cannot be used to operate the parent window object in the dialog box.
2. The correct approach By passing parameters when calling modaldialog Example: Requirement The parent window page is a.html child window The page is b.html. There is a text box in a.html with the ID test1. Click the button in the opened dialog box to change the text box value of a.html to "subwindow value". Implementation When opening the dialog box, pass test1 as a parameter to the sub-window, obtain the parameters in the sub-window, and set the value attribute value of the parameter object (that is, the text object passed in a.html) to "sub-window" Window value" Note: Only id can be passed here, not name a.html code is as follows
If there are many parent window objects that need to be operated, you can also use window or window.document as a parameter passed to the child window. Example: Requirement Add a form with the id "aform" in a.html. There is a text box with the id test2 in the form. In b.html, in addition to the above operations, Also change the value of test2 to "subwindow value 2" and submit the form to c.html. Implementation 1 Change the function that opens the dialog box in a.html to the following method: window.showModalDialog(“b.html”, window.document); Change func1 in b.html () is changed to the following:
function func1(){ var pdoc = window.dialogArguments; if(pdoc!=undefined){ pdoc.all.test1.value="child window value"; pdoc.all.test2.value="child Window value 2″; pdoc.all.aform.action=”c.html”; pdoc.all.aform.submit(); } }
Implementation 2 Because there are many operations on the parent window in the child window, it can also be implemented using execScript. Change the function that opens the dialog box in a.html to the following:
function func1(){ var pwin = window.dialogArguments; if(pwin!=undefined){ var codeStr = ”func();” pwin.execScript(codeStr,”javascript”); window.close( ); } }
Usage experience of showModalDialog and showModelessDialog - Reposted
1. What is the difference between showModalDialog and showModelessDialog? showModalDialog: After being opened, the input focus will always be maintained. The user cannot switch to the main window unless the dialog box is closed. Similar to the operation effect of alert. showModelessDialog: After being opened, the user can switch the input focus randomly. It has no effect on the main window (at most it is blocked for a while.)
2. How to prevent the hyperlinks in showModalDialog and showModelessDialog from popping up new windows? Just add to the opened web page. This sentence is usually placed between and .
3. How to refresh the content in showModalDialog and showModelessDialog? You cannot press F5 to refresh in showModalDialog and showModelessDialog, and the menu cannot pop up. This can only rely on javascript. The following is the relevant code:
reload… Replace filename.htm with the name of the web page and put it into the web page you open, press F5 It can be refreshed. Note that this must be used in conjunction with , otherwise a new window will pop up when you press F5.
4. How to use javascript to close the window opened by showModalDialog (or showModelessDialog)
Also match , otherwise a new IE window will be opened and then closed.
5. ShowModalDialog and showModelessDialog data transfer skills (Author’s note: I originally wanted to write it in a question and answer format, but I couldn’t figure out how to ask this, so I had to That's it. ) This thing is quite troublesome. I have changed it several times and I can't explain it (my language skills are getting worse), so I have to use an example to explain.
Example: Now you need to read or set a variable var_name in a showModalDialog (or showModelessDialog) General delivery method:
window.showModalDialog(“filename.htm”,var_name) //Pass the var_name variable When reading and setting in showModalDialog (or showModelessDialog): alert(window.dialogArguments)//Read the var_name variable window.dialogArguments=”oyiboy”//Set the var_name variable This The method is satisfactory, but what if you want to operate the second variable var_id while operating var_name? It can no longer be operated. This is the limitation of this delivery method. The following is the delivery method I recommend: window.showModalDialog("filename.htm",window) //No matter what variables you want to operate, only pass the window object of the main window directly When showModalDialog (or showModelessDialog) reads and sets: alert(window.dialogArguments.var_name)//Read the var_name variable window.dialogArguments.var_name=”oyiboy”//Set the var_name variable At the same time I You can also operate the var_id variable alert(window.dialogArguments.var_id)//Read the var_id variable window.dialogArguments.var_id=”001″//Set the var_id variable You can also set any of the main window Objects are operated on, such as elements in the form object. window.dialogArguments.form1.index1.value="This is setting the value of the index1 element"
6. Interaction of multiple showModelessDialogs Because It's very laborious to just say it, so I'll be lazy and explain it directly in code. If you don't understand, just write to (oyiboy#163.net (please change # to @ when using)) and ask me. The main function of the following code is to move the position of another showModelessDialog within a showModelessDialog. Part of the js code of the main file.
var s1=showModelessDialog('control.htm',window ,"dialogTop:1px;dialogLeft:1px") //Open the control window var s2=showModelessDialog('about:blank',window,"dialogTop:200px;dialogLeft:300px") //Open the controlled window