javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例

针对这个话题,我将给出完整的攻略,包含如下内容:

针对这个话题,我将给出完整的攻略,包含如下内容:

  1. showModalDialog传值的示例说明

  2. window.open父子窗口传值的示例说明

  3. 相关代码和详细解析

1. showModalDialog传值的示例说明

showModalDialog是JavaScript中的一个对话框方法,使用它我们可以打开模态对话框,将父窗口传入的值传递给子窗口。下面给出具体的例子:

//在父窗口中打开模态对话框
var returnValue = showModalDialog('ChildWindow.html', 'dialogWidth:400px;dialogHeight:300px');

//子窗口获得传入的值
alert(returnValue);

通过这段代码,我们打开名为"ChildWindow.html"的子窗口,并设置了其大小,该窗口会在父窗口之上,直到关闭该窗口才会重新启用父窗口。当关闭该窗口时,showModalDialog方法返回一个returnValue,也就是子窗口传递回来的字符串值。在本例中,该值会在父窗口中弹出一个对话框框显示。

2. window.open父子窗口传值的示例说明

相较于showModalDialog方法,window.open方法是打开常规的子窗口,最常见的应用就是新窗口打开网页。下面是一个利用window.open方法打开子窗口,并向子窗口传递值的例子:

//在父窗口中打开子窗口
var childWindow = window.open('ChildWindow.html', 'childWindowName');

//传递值给子窗口
childWindow.myValue = 'Hello World!';

//在子窗口中读取值
var myValue = window.opener.myValue;

//将值显示在子窗口中
alert(myValue);

该例中,我们使用window.open方法在父窗口中打开"ChildWindow.html"的子窗口,并给子窗口命名为"childWindowName"。接着,我们将字符串"Hello World!"赋值给新窗口的myValue属性。在子窗口中,我们使用window.opener访问响应的父窗口(即打开的窗口)对象,并通过myValue属性获得传入的值。

3. 相关代码和详细解析

以上两个例子都是很常见的,而window.open方法的应用范围更广,所以我们重点对window.open方法进行解析。

在window.open的第一个参数中,我们可以指定要打开的网页的URL,如果URL是相对路径的话,会从当前路径开始解析。第二个参数是打开网页的窗口的名称,如果该名称已被使用,相应的网页会在原有窗口中打开。在第三个参数中,我们可以设置一个字符串列表,指定可能要用到的新窗口的一些特征,比如新窗口的大小、是否显示滚动条等等。

我们可以在新窗口中为子窗口对象赋任何属性,如myValue属性,在父窗口中可以通过

var myValue = window.opener.myValue;

来访问。值得注意的是,虽然我们可以改变使用window.opener获得的父窗口对象的属性,但我们不应该改变窗口本身或其中的DOM元素。这样做容易引起一些难以追踪的错误。

本文标题为:javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例

基础教程推荐