widow open post方法

本文介绍了一个JavaScript函数,该函数能够在一个新的浏览器窗口中打开指定URL,并通过POST方式传递一组键值对参数。这种方法常用于需要跨窗口进行表单提交的场景。

from:http://hi.baidu.com/iorichina/blog/item/5a2b323f20a901fc54e72386.html

  1. function openWindowWithPost(url, name, keys, values) {   
  2.      var newWindow = window.open(url, name);   
  3.      if (!newWindow) return false ;   
  4.      var html = "" ;   
  5.      html += "<html><head></head><body><form id='formid' method='post' action='" + url + "'>" ;   
  6.      if (keys && values && (keys.length == values.length))   
  7.          for ( var i = 0; i < keys.length; i++)   
  8.          html += "<input type='hidden' name='" + keys[i] + "' value='" + values[i] + "'/>" ;   
  9.      html += "</form><script type='text/javascript'>document.getElementById(/"formid/").submit()</script></body></html>" ;   
  10.      newWindow.document.write(html);   
  11.      return newWindow;   

### 使用 `window.open` 和 `postMessage` 进行跨窗口通信 #### 创建子窗口并通过 `postMessage` 发送消息 以下是通过 `window.open` 打开一个新的浏览器窗口,并使用 `postMessage` 向该窗口发送消息的示例。 ##### 父窗口代码 ```javascript // 打开新的窗口 const childWindow = window.open('about:blank', '_blank'); // 当新窗口加载完成后,向其发送一条消息 childWindow.onload = () => { const message = { greeting: 'Hello from parent!', time: new Date().toISOString() }; childWindow.postMessage(message, '*'); // '*' 表示不限制目标窗口的来源 }; ``` --- #### 子窗口接收父窗口的消息 在子窗口中监听 `message` 事件以接收来自父窗口的消息。 ##### 子窗口代码 ```javascript window.addEventListener('message', function(event) { // 验证消息来源是否可信 if (event.origin !== 'http://parent-origin.com') return; console.log('Received message from parent:', event.data); // 反馈给父窗口 event.source.postMessage({ response: 'Hi back from child!' }, event.origin); }); ``` --- #### 子窗口向父窗口发送消息 同样可以通过 `postMessage` 让子窗口主动向父窗口发送消息。 ##### 子窗口代码 ```javascript function sendMessageToParent() { const message = { status: 'Child is ready!', timestamp: new Date().toISOString() }; window.opener.postMessage(message, '*'); // 使用 opener 属性获取父窗口引用 } sendMessageToParent(); ``` --- #### 父窗口接收子窗口的消息 在父窗口中监听 `message` 事件以接收来自子窗口的消息。 ##### 父窗口代码 ```javascript window.addEventListener('message', function(event) { // 验证消息来源是否可信 if (event.origin !== 'http://child-origin.com') return; console.log('Received message from child:', event.data); }); ``` --- #### 关键点说明 1. **验证消息来源** 在处理接收到的消息时,始终要检查 `event.origin` 是否与预期一致,从而避免潜在的安全风险[^2]。 2. **跨域限制** 即使使用 `postMessage`,仍然受到同源策略的影响。如果目标窗口不在同一域下,则需要显式指定允许的目标地址而不是使用通配符 `'*'`[^3]。 3. **生命周期管理** 注意 `window.open` 返回的对象在其对应的窗口关闭后将变得不可用。此时尝试调用此对象上的方法会抛出错误。可通过检测 `closed` 属性来判断窗口状态[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值