Chrome does not support ShowModalDialog modal dialogs and solutions that fail to return returnvalue problems _javascript tips

What? modal dialog box invalid?

Last week, to modify the test of a background management project, in the test with the browser compatibility, found in the Chrome browser ShowModalDialog method is not displayed in the modal dialog box, like a new page opened, the parent window is still free to get the focus, and can open more than one form , and the return value ReturnValue can not return, has been undefined. So many of the questions are troubling, and the following is a test of the latest browsers in the mainstream.

Browser	Whether to support	State
IE9	0
Firefox13.0	0
safari5.1	0
chrome19.0	X	is not modal dialog box, but open a new form
Opera12.0	X	Nothing happens, even a form doesn't play.

What the hell is chrome opening?

Because the open is not a modal dialog box, but like open a new form, so as long as the verification of a sudden form window.opener is empty to understand.

<script type= "Text/javascript" >
    alert (window.opener);
</script>

In Chrome, an [object window] object is displayed, and IE is undefined. Now know that the original Chrome ShowModalDialog as a window.open to deal with. In other words, we can use Window.opener to manipulate the form of the Chrome browser. And here's a very interesting phenomenon. Firefox test Window.opener is also not empty, so I tested the use of ShowModalDialog in the subform on the Window.opener and window.dialogarguments in each browser situation, because the Opera browser even a window The body does not play, the following test will eliminate it.

Arguments pass is the window object that describes the ShowModalDialog method of the parent form, and the following is the result of the test:

Browser	modal dialog box	Window.opener	Window.dialogarguments	ReturnValue
IE9	0	Undefined	[Object Window]	0
Firefox13.0	0	[Object Window]	[Object Window]	0
safari5.1	0	[Object Window]	[Object Window]	0
chrome19.0	X	[Object Window]	Undefined	X

The above is the result of my test, the degree that each browser supports is still different. Also say the Firefox browser, subform If the refresh words window.dialogarguments will be lost, become undefined. We can see from the above results that the return value returnvalue only the Chrome browser is returning undefined, and the other browsers are fine. So how do we solve this problem?

Solve returnvalue problem

With all of the above tests, we already know that Chrome's showmodaldialog approach is much like the window.open approach, so we can use Window.opener to achieve window.returnvalue functionality.

Note: temp=math.random () This random parameter is to solve the caching problem, many friends have tested undefined because it is a caching problem. Appended to 2012-10-17

Parent form part JS code:

Window.onload = function () {
  var returnvalue = window.showModalDialog ("son.html?temp=" + math.random (), window); 
   //for Chrome
  if (returnvalue = = undefined) {
    returnvalue = window.returnvalue;
  }

  alert (returnvalue);
}

Sub-form part of the JS code:

if (window.opener!= undefined) {
    //for chrome
    window.opener.returnValue = "Opener ReturnValue";
}
else {
    window.returnvalue = "Window ReturnValue";
}
Window.close ();

This is also in Ie,firefox,chrome,safari and other browsers can be universal.

At last

Finally, someone asked how to implement the modal dialog box? I think it is possible to use a number of JS skills to achieve, but I do not recommend this, I also queried the information is not very good to solve this problem. Of course, there are other ideas, for example, in order not to eject more forms, you can click on the open form to set the Open button is not available, only to close the subform and then set to usable. All of these can be practiced by themselves, perhaps with a better method.

Finally, I would like to say that in today's web design is very popular with Div in the page to simulate a form, style customization, the interaction is very good, not necessarily to use modal forms, how to simulate a lot of online, today to write here, what the wrong place please everyone more correct ~ ~