CN106528118A - Method for solving compatibility of modal and non-modal windows in browser - Google Patents

Abstract

The invention discloses a method for solving compatibility of modal and non-modal windows in a browser, and belongs to the technical field of Web project development. The method comprises the steps of using a window.open method for solving the compatibility problem of the modal and non-modal windows in the browser, and transferring data between sites by using url parameters, thus ensuring that the data can be acquired by using the parameters even domain names are different; packaging the parameters by openpage and closepage pages; and opening a new window by directly using a window.open (pageURL, name, parameters) mode, wherein the parent window can be accessed by using a window.opener in the child window when the parameters in the child window need to be transferred back to the parent window. According to the method provided by the invention, the compatibility problem of the modal and non-modal windows in the browser is solved by using the window.open method.

Description

A kind of mode and nonmodal window solution compatible in a browser

Technical field

The present invention relates to Web project development technical field technical fields, specifically a kind of mode and nonmodal window Compatible solution in a browser.

Background technology

In the exploitation of Web projects, developer often uses window dialog frame, is represented to user by window Information.Window dialog frame is divided into modal dialog box and modeless dialog box, and both concepts come from gui program.Developer During using both forms dialog boxes, in different browsers, may there is compatibility issue and cannot show.

Browser-safe sex chromosome mosaicism, refers to because different browsers has different parsings to same section of code, causes page The skimble-scamble situation of face display effect.In most of the cases, our demand is no matter user is checked with what browser Our website or the system for logging in us, should all be unified display effects.So the compatibility issue of browser is Front end developer often encounters and has to the problem for solving.

For browser, although ie still about occupies 67% share in browser market now, but due to its each side The shortcoming in face, user start to select other browsers as the main tool for oneself browsing webpage, such as firefox, Theworld, maxthon, chrome, opera etc., in user is using more browsers, are divided into 2 big factions-ie Kernel and non-ie kernels, as theworld, maxthon, greenbrower etc. belong to ie kernels, and firefox, Chrome, opera are then non-ie kernels, and numerous browsers makes our web programs occur as soon as compatibling problem, as ie just There are dividing for ie 6, ie7, ie8, same pattern control and js scripts, different effects also occur in different ie versions, Even bug, in addition in firefox, chrome, opera of non-ie kernels.Analyze from the market share, current ie is still clear Look at device market greatly, and can be difficult to change within a very long time, but we can not ignore firefox and other browse The Fast Growth of device, it is following that we have no idea to estimate that many naive users also do not see the advantage of other non-ie kernels, when When they have found, whether ours is going to meet their demand evening, so we must accomplish many browsers It is compatible.

Modal dialog box can block its parent window after opening and receive keyboard and mouse information, and make parent window be to defocus Point.Only after user closes current modal dialog box, parent window just can obtain focus again and recover various message.Allusion quotation The modal dialog box of type has：Open/save as dialog box；Modeless dialog box will not then block its parent window and receive keyboard and mouse Mark message, its parent window still can obtain focus.Typical modeless dialog box has：Lookup/search dialogue.

Window.showModalDialog methods are not the methods in W3C specifications, and which is initially introduced by IE4, are used To create a modal dialog box, and the HTML pages are shown wherein.Its form is：

vReturnValue=object.showModalDialog(sURL [,vArguments] [, sFeatures])

Three parameters are respectively：The URL of the HTML pages of dialog box loading, the parameter of the incoming dialog box page, control dialogue Frame represents the parameter of effect.

Wherein the incoming parameters of vArguments can be obtained by document.arguments in the dialog box page Content.

In Firefox 3, also achieve to window.showModalDialog methods, its method of calling and IE It is similar, simply there are individual parameters to be not carried out.

Window.showModelessDialog methods are nor method in W3C specifications, which is initially drawn by IE5 Enter, for creating a modeless dialog box, and show html page wherein.Its form is：

vReturnValue=object.showModelessDialog(sURL [, vArguments] [, sFeatures])

Using method is similar with showModalDialog.

If Web project developments personnel in javaScript the showModalDialog used in scripted code with ShowModelessDialog methods, then may result in operational effect is not Expected Results, in some instances it may even be possible to cause code report It is wrong.Reason is that different browsers are different to the support situation of two methods, some browser-incompatibles.

The content of the invention

The technical assignment of the present invention is for above weak point, there is provided a kind of mode and nonmodal window are in a browser The solution of compatibility, solves mode by using window.open methods and nonmodal window is compatible in a browser Problem.

The technical solution adopted for the present invention to solve the technical problems is：

A kind of mode and nonmodal window solution compatible in a browser, solves mould using window.open methods State and nonmodal window compatibility issue in a browser, the data between website, is passed with url parameters, it is ensured that parameter is not Data can not be obtained because domain name is different；These parameters, rather than letter are encapsulated with openpage the and closePage pages It is single parameter, between 2 websites, pass. the effect done gives people perceptual image and falls use Window.howModalDialog is the same.

Under IE, showModalDialog and showModelessDialog can be passed through and open mode and nonmodal window; Under Firefox then can not, to solve the above problems, lifted lifted browser compatibility, we adopt solution below：Directly Connect and new window is opened using window.open (pageURL, name, parameters) mode, need the parameter in subwindow When being passed back to parent window, the window.opener used in subwindow is accessing parent window.

Window.open (pageURL, name, parameters), wherein：PageURL be subwindow path, name For subwindow handle, parameters is window parameter.

What window.opener was returned is the reference of that parent window for creating current window, such as clicks a.htm On one link and open b.htm, then we intend to be input on the b.htm value then give on a.htm one During individual id is for the textbox of " name ", it is possible to be written as：

Window.opener.document.getElementById (" name ") .value=" data of input ".

A kind of mode and nonmodal window of present invention solution compatible in a browser compared to the prior art, Have the advantages that：

Mode and nonmodal window compatibility issue in a browser is solved with window.open methods, the number between website According to being passed with url parameters, it is ensured that parameter will not can not obtain data because domain name is different；

These parameters are encapsulated with openpage the and closePage pages, rather than simply parameter, between 2 websites, Pass. the effect done give people perceptual image fall it is the same with window.howModalDialog.

Specific embodiment

With reference to specific embodiment, the invention will be further described.

Support situation of each browser to showModalDialog methods is analyzed first.Analysis code below：

modaldialog.html：

<input type= "text " id= "textbox " value= "defaultValue " /><br />

<button id= "open1 ">Open ModalDialog</button>

<script>

var updatetext = " ";

function update() {

document.getElementById( "textbox ").value = updatetext;

}

document.getElementById( "open1 ").onclick = function () {

window.showModalDialog( "inner.html ", window);

}

</script>

inner.html：

<input type= "text " id= "dialogtext " /><button id= "ok ">OK!</button>

<script>

document.getElementById( "dialogtext ").value =

window.dialogArguments.document.getElementById( "textbox ").value;

document.getElementById( "ok ").onclick = function () {

window.dialogArguments.updatetext =

document.getElementById( "dialogtext ").value;

window.dialogArguments.update();

window.close();

}

</script>

Above in code, modaldialog.html creates multimodal dialogue using window.showModalDialog methods Frame, is loaded into inner.html, and the window objects of the incoming modaldialog.html pages.

Page inner.html, after opening, the value of text box INPUT [id=" dialogtext "] is initial It is worth the value values for page modaldialog.html Chinese version frame INPUT [id=" textbox "], works as change Value values of INPUT [id=" dialogtext "] after clicking on " OK " button, modal dialog box is closed, the page The value values of modaldialog.html Chinese version frame INPUT [id=" textbox "] will be changed into multimodal dialogue inframe Character string in text box.

Performance of this section of code in different browser environments is as follows：

Description/browser IE6 IE7 IE8 Firefox Safari/Chrome/Opera

Window.showModalDialog return values=function successes/success/success

Pop-up dialogue box success/success/failure

Dialog box is modal dialog box success/failure/failure

Dialog box and parent window interact/success/failure/failure by arguments

It can be seen that, showModalDialog methods are included in the window objects of each browser, and is returned function () { [native code] }。

In IE Firefox Safari, preferable is supported to showModalDialog, the window of ejection is mode Dialog box, parent window lose focus, and by arguments parameters, parent window directly successfully completes number with modal dialog box According to interaction；

In Chrome, although successfully ejected dialog box by showModalDialog, but this dialog box is not mould State, parent window still can obtain focus, and data interaction failure, be very similar to window.open methods；

In Opera, although window.showModalDialog is returned as very, but bullet does not go out dialog box, can not be real Existing its function.

Support situation of each browser of lower surface analysis to showModelessDialog methods.

modelessdialog.html：

<input type="text" id="textbox" value="defaultValue" /><br />

<button id="open1">Open ModelessDialog</button>

<script>

var updatetext = "";

function update() {

document.getElementById("textbox").value = updatetext;

}

document.getElementById("open1").onclick = function () {

window.showModelessDialog("inner.html", window);

}

</script>

inner.html：

<input type="text" id="dialogtext" /><button id="ok" >OK!</button>

<script>

document.getElementById("dialogtext").value =

window.dialogArguments.document.getElementById( "textbox").value;

document.getElementById("ok").onclick = function () {

window.dialogArguments.updatetext =

document.getElementById("dialogtext").value;

window.dialogArguments.update();

window.close();

}

</script>

Code is similar with the preceding paragraph above, only changes showModalDialog methods into ShowModelessDialog methods.

Performance of this section of code in different browser environments is as follows：

Description/browser IE6 IE7 IE8/Firefox Chrome Safari Opera

Window.showModelessDialog return values=function successes/failure

ShowModelessDialog methods are only supported by IE at present, in other browsers Window.showModelessDialog returns " undefined ".

When we access, most important of which principle, the data between website, is passed with url parameters, thus Can ensure that parameter will not be different because of domain name, and data can not be obtained.And we use openpage the and closePage pages, Main purpose is to encapsulate these parameters, rather than simply parameter, between 2 websites, is passed. the effect done to People's perceptual image falls the same with window.howModalDialog.

Under IE, showModalDialog and showModelessDialog can be passed through and open mode and nonmodal window； Under Firefox then can not, to solve the above problems, lifted lifted browser compatibility, we adopt solution below：

1. new window is opened using window.open (pageURL, name, parameters) mode directly.

2. if necessary to the parameter in subwindow is passed back to parent window, can be used in subwindow Window.opener is accessing parent window.

Embodiment

<SCRIPT>

<!--

window.open ('page.html','newwindow','height=100,width=400,top=0,left=0, toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')

// write as a line

-->

</SCRIPT>

Script operation after, page.html will be opened in new forms newwindow, a width of 100, a height of 400, away from screen push up 0 as Element, shields left 0 pixel, without tool bar, without menu bar, without scroll bar, can not be sized, zero-address hurdle, stateless hurdle.Please be right According to.

If necessary to the parameter in subwindow is passed back to parent window, the window.opener used in subwindow comes to visit Ask parent window：

What window.opener was returned is the reference of that parent window for creating current window, is such as clicked on a.htm One links and opens b.htm, and then we intend an id being worth on then imparting a.htm is input on b.htm In textbox for " name ", it is possible to be written as：

Window.opener.document.getElementById (" name ") .value=" data of input ".

By specific embodiment above, the those skilled in the art can readily realize the present invention.But should Work as understanding, the present invention is not limited to above-mentioned specific embodiment.On the basis of disclosed embodiment, the technical field Technical staff can be combined different technical characteristics, so as to realize different technical schemes.

In addition to the technical characteristic described in specification, the known technology of those skilled in the art is.

Claims (2)

1. a kind of mode and nonmodal window solution compatible in a browser, it is characterised in that use Window.open methods solve mode and nonmodal window compatibility issue in a browser, the data between website, use Url parameters are passing, it is ensured that parameter will not can not obtain data because domain name is different；With openpage the and closePage pages Encapsulate these parameters；

Directly new window is opened using window.open (pageURL, name, parameters) mode, need in subwindow Parameter when being passed back to parent window, the window.opener used in subwindow is accessing parent window.

2. a kind of mode according to claim 1 and nonmodal window solution compatible in a browser, which is special It is window.open (pageURL, name, parameters) to levy, wherein：PageURL is subwindow path, and name is Subwindow handle, parameters are window parameter.