针对这个话题,我将给出完整的攻略,包含如下内容:
针对这个话题,我将给出完整的攻略,包含如下内容:
-
showModalDialog传值的示例说明
-
window.open父子窗口传值的示例说明
-
相关代码和详细解析
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 父子窗口传值示例
基础教程推荐
- vue项目打包部署跨域的实现步骤 2023-07-10
- vue使用moment如何将时间戳转为标准日期时间格式 2023-07-09
- 服务控件与html标签的一点 2023-10-29
- JavaScript canvas复刻苹果发布会环形进度条 2022-08-30
- vue 快速入门 系列 —— 虚拟 DOM 2023-10-08
- js实现iGoogleDivDrag模块拖动层拖动特效的方法 2024-01-04
- 最常用的12种设计模式小结 2024-01-08
- 20行JS代码实现网页刮刮乐效果 2023-12-21
- 原生ajax和iframe框架实现图片文件上传的两种方式 2022-12-28
- 用VsCode编辑TypeScript的实现方法 2024-02-07