window.opener如何使用

时间: 2024-05-16 09:19:19 浏览: 105

用window.open,opener实现网页间通信

### 使用 `window.open` 和 `window.opener` 实现网页间通信 #### 一、引言在现代Web开发中，网页间的通信是一项常见的需求。例如，在多窗口或多个标签页的应用场景下，如何实现不同窗口间的高效数据交互，成为了一个重要的技术问题。通常情况下，我们可以通过服务器作为中介来实现这一目的，但这会增加网络负担，并且可能会降低用户体验。本文将详细介绍一种基于 `window.open` 和 `window.opener` 的网页间通信方法，该方法无需借助服务器即可实现网页间的数据传递。 #### 二、原理概述 `window.open` 方法可以用于打开一个新的浏览器窗口或标签页，而 `window.opener` 是指向创建当前窗口的窗口对象的一个指针。利用这两个API，我们可以实现在两个网页之间直接进行数据传递。 #### 三、前提条件为了确保跨窗口的数据传输安全，浏览器实施了同源策略。这意味着只有当两个网页来自相同的协议（http 或 https）、域名和端口时，才能相互访问。因此，在使用 `window.open` 和 `window.opener` 进行通信之前，请确保它们满足同源策略的要求。 #### 四、示例代码分析以下是一个简单的示例，展示了如何使用 `window.open` 和 `window.opener` 在三个HTML页面（`first.html`、`second.html` 和 `third.html`）之间进行通信： 1. **`first.html`**: - 页面提供了两个按钮：“open” 和 “setmsg”。 - 当点击 “open” 按钮时，通过 `window.open` 打开 `second.html`。 - 当点击 “setmsg” 按钮时，调用 `secondcall` 方法向 `second.html` 发送消息。 2. **`second.html`**: - 页面提供了“back” 按钮和一个文本框。 - 当点击 “back” 按钮时，通过 `window.opener` 访问 `first.html` 的文本框，并设置其值。 - 定义了 `secondcall` 方法，接收从 `first.html` 传来的消息。根据消息内容的不同，可以选择打开 `third.html` 或者直接在当前页面显示消息。 3. **`third.html`**: - 页面提供了“backfirst” 和 “backsecond” 按钮以及一个文本框。 - 当点击 “backfirst” 或 “backsecond” 按钮时，通过 `window.opener` 分别将消息回传至 `first.html` 和 `second.html`。 #### 五、代码详解 **1. `first.html`** ```html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(init); var pwn; function init() { $(":button").click(function () { var btn = this.value; switch (btn) { case "open": pwn = window.open('second.html', 'second', 'left=400,top=200,width=300,height=300,toolbar=no'); break; case "setmsg": pwn.secondcall($("#msg").val()); break; } }); } </script> </head> <body> <input type="button" value="open"/> <br/> <input type="button" value="setmsg"/><br/> <input type="text" id="msg" value=""/> </body> </html> ``` **2. `second.html`** ```html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(init); function init() { var tw; $(":button").click(function () { var txt = window.opener.document.getElementById("msg"); txt.value = "secondsaysyouwelcome"; }); } function secondcall(msg) { if (msg.indexOf("third") > 0) { tw = window.open("third.html", "third", "left=600,top=200,width=300,height=300,toolbar=no"); } else { $("#msg").val(msg); } } </script> </head> <body> <input type="button" value="back"/> <br/> <input type="text" id="msg" value=""/> </body> </html> ``` **3. `third.html`** ```html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(init); function init() { $(":button").click(function () { var btn = this.value; var txt = window.opener.document.getElementById("msg"); if (btn === "backfirst") { txt.value = $("#msg").val(); } else if (btn === "backsecond") { txt.value = $("#msg").val(); } }); } </script> </head> <body> <input type="button" value="backfirst"/> <br/> <input type="button" value="backsecond"/> <br/> <input type="text" id="msg" value=""/> </body> </html> ``` #### 六、注意事项 - 在使用 `window.open` 时，请注意不要违反浏览器的弹窗阻止功能。 - 当使用 `window.opener` 时，确保当前窗口是由另一个窗口打开的，否则 `window.opener` 将为 `null`。 - 请注意同源策略限制，确保所有涉及通信的页面都来自相同的域名、协议和端口号。 - 测试环境为 Windows 10 32位系统，使用 Visual Studio 2012 编写。 #### 七、总结本文通过实例介绍了如何利用 `window.open` 和 `window.opener` 在网页之间进行数据通信的方法。这种方法简单易懂，无需服务器支持即可实现数据传递，适用于简单的网页应用开发。然而，对于复杂的应用场景，可能还需要考虑更高级的通信方式，如 WebSockets、Server-Sent Events 等。

window.opener是指调用window.open方法的窗口。在工作中，可以使用window.opener来解决跨页操作的问题。比如，在主窗口打开了一个页面，并且希望在该关闭后刷新主窗口，可以使用window.opener.location.reload()来实现主窗口的刷新。此外，如果想在新打开的页面中设置父窗口中某个表单元素的值，可以使用window.opener.document.parentForm.stockBox.value = symbol来实现。通过使用window.opener，可以方便地实现不同窗口之间的信息传递和操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [window.opener用法](https://blog.csdn.net/iBenxiaohai123/article/details/77413929)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

阅读全文

window.opener如何使用

相关推荐

window.opener用法和用途实例介绍

字符串 window.open() window.opener window.name window对象等的总结

parent.window. window.opener. 区别

window.opener和window.parent

window.location.href和window.opener.location.href

window.open 和 window.opener 的详细解说

通过window.opener控制父窗体

javascript window.opener的用法分析

解析javascript window.opener功能与open方法配合使用

window.opener

window.opener null 和 window.colse()无效

window.opener.postMessage

window.opener的用法

window.opener.location.reload();

window.opener 都有什么

window.opener.document.getElementById("hdnprocessInstOID").value

Pytorch版代码幻灯片.zip

Jupyter_Chat甄嬛是利用甄嬛传剧本中所有关于甄嬛的台词和语句基于ChatGLM2进行LoRA微调得到的模仿甄.zip

高效甘特图模板下载-精心整理.zip

最新推荐

Pytorch版代码幻灯片.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

【数据传输高速公路】：总线系统的深度解析

如何结合PID算法调整PWM信号来优化电机速度控制？请提供实现这一过程的步骤和代码示例。

Vue.js开发利器：chrome-vue-devtools插件解析