javascript 弹出的窗口返回值给父窗口具体实现
### JavaScript 弹出窗口返回值给父窗口具体实现知识点 #### 1. 窗口间通信的需求 在Web开发中,经常需要在父窗口和弹出窗口间进行数据交互。一个典型的场景是弹出窗口用于让用户进行某些选择或者填写表单,之后将这些信息传回父窗口进行后续处理。例如,在电子商务平台上,用户可能会在一个弹出窗口中选择商品的不同规格,然后需要将这些选择传回主页面来生成订单。 #### 2. `window.open` 方法 在文档中,`selectValue` 函数使用了 `window.open` 方法打开一个新的窗口。这个方法接受三个参数:要打开的URL、窗口名称和参数设置。 - URL: "sub.html" 是要打开的子窗口的页面地址。 - 窗口名称: 在此处为空,表示打开的窗口没有名称。 - 参数设置: 详细说明了子窗口的一些特性,比如无状态栏(`status:no`)、可调整大小(`resizable:yes`)、指定高度和宽度、没有装饰(`unadorned:yes`)。 #### 3. 子窗口中的 `selectValues` 函数 子窗口的 `selectValues` 函数通过处理表单中的复选框(checkbox)来获取用户的选择。它使用 `document.getElementsByName` 方法获取所有名为 "temp" 的表单元素,然后遍历这些元素,将选中的项的值拼接成一个字符串。 这里需要注意的是,`document.getElementsByName` 方法返回的是一个NodeList对象,其中包含所有具有指定名称的元素。函数中通过遍历这个NodeList对象,并检查每个元素的 `checked` 属性来确定该项是否被选中。 #### 4. 将数据传回父窗口 将数据传回父窗口是通过修改父窗口的文档对象来完成的。`selectValues` 函数通过 `window.opener` 对象引用父窗口,并进一步通过 `document.all` 或 `document.getElementById`(取决于浏览器)访问父窗口文档中的特定元素。在这个例子中,父窗口中有一个名为 `testInput` 的文本输入框,子窗口将拼接好的字符串赋值给它的 `value` 属性。 完成数据传递后,使用 `window.close()` 方法关闭子窗口。 #### 5. 注意事项 - `window.opener` 对象只有在子窗口是由父窗口打开时才有效。 - 不同浏览器对 `window.opener` 对象的支持可能有所不同,因此在兼容性测试时需要特别注意。 - 由于安全原因,一些现代浏览器可能会限制对 `window.opener` 的使用。 - 在使用 `window.open` 打开新窗口时,应避免使用弹出窗口拦截器阻止的特性,如在一些浏览器中设置 `status:no` 可能会触发拦截。 - 如果子窗口和父窗口同源,可以使用 `postMessage` 方法在它们之间进行更安全的通信。 #### 6. 代码实现的补充说明 - 子窗口的HTML代码中使用了 `<BODY>` 标签的 `onload` 属性,可以在页面加载完成时执行 `selectValues` 函数。 - 子窗口中的表单元素需要一个触发函数的按钮,以便用户在做完选择之后,可以点击该按钮将结果传回父窗口并关闭子窗口。 #### 7. 兼容性和安全 - 确保子窗口的脚本在父窗口和子窗口都兼容的情况下运行。 - 理解并遵守同源策略,以避免跨域通信中的安全问题。 - 考虑到用户体验,避免在没有用户交互的情况下打开窗口或在关闭窗口前没有给予用户适当的提示和警告。 以上内容详细介绍了通过JavaScript实现从弹出窗口向父窗口传递数据的具体方法、实现的细节以及需要注意的兼容性和安全问题。对于需要在Web应用中实现类似功能的开发者来说,这些知识点是必不可少的。
- 粉丝: 6
- 资源: 884
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 计算机毕业设计:python+爬虫+cnki网站爬
- nyakumi-lewd-snack-3-4k_720p.7z.002
- 现在微信小程序能用的mqtt.min.js
- 基于MPC的非线性摆锤系统轨迹跟踪控制matlab仿真,包括程序中文注释,仿真操作步骤
- shell脚本入门-变量、字符串, Shell脚本中变量与字符串的基础操作教程
- 基于MATLAB的ITS信道模型数值模拟仿真,包括程序中文注释,仿真操作步骤
- 基于Java、JavaScript、CSS的电子产品商城设计与实现源码
- 基于Vue 2的zjc项目设计源码,适用于赶项目需求
- 基于跨语言统一的C++头文件设计源码开发方案
- 基于MindSpore 1.3的T-GCNTemporal Graph Convolutional Network设计源码