I am back

很久不来这里了。

最近工作太忙了。

很想在优快云找几个对做游戏感兴趣的小朋友! 

### 关于 `window.parent.postMessage` 的用法 `window.parent.postMessage` 是一种用于跨域通信的方法,允许不同源的网页之间安全地传递消息。此方法通过向父窗口发送消息来实现子页面与父页面之间的交互。 以下是关于其基本语法和参数解释: #### 基本语法 ```javascript otherWindow.postMessage(message, targetOrigin); ``` - **`message`**: 要发送的消息内容,可以是字符串或其他可序列化的数据结构。 - **`targetOrigin`**: 指定目标窗口所在的域名地址。如果设置为 `"*"`,则表示不限制接收方的来源,但这可能会带来安全隐患[^1]。 #### 示例代码 下面是一个简单的例子展示如何利用 postMessage 进行父子框架间的通讯: 假设有一个主页面加载了一个来自其他站点的 iframe 子页面. **Parent Page (index.html):** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Post Message Example</title> </head> <body> <iframe id="myIframe" src="https://example.com/child.html"></iframe> <script type="text/javascript"> var childFrame = document.getElementById('myIframe').contentWindow; function sendMessageToChild() { let messageData = 'Hello from parent!'; childFrame.postMessage(messageData, 'https://example.com'); } // Listen for messages coming back from the child frame. window.addEventListener('message', function(event) { console.log(`Received response: ${event.data}`); // Always check event.origin to ensure it's expected domain sending data. if (event.origin !== 'https://example.com') return; alert(`Response received: ${event.data}`); }); setTimeout(sendMessageToChild, 2000); </script> </body> </html> ``` **Child Frame (child.html on https://example.com):** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Child Page</title> </head> <body> <h1>This is Child Page.</h1> <script type="text/javascript"> window.addEventListener('message', function(event) { console.log(`Message Received From Parent:`, event.data); // Ensure that this message comes only from trusted domains. if (event.origin !== 'http://your-parent-domain.com') return; // Responding back with some information. let responseData = 'Hi there! I am your child.'; event.source.postMessage(responseData, event.origin); }); </script> </body> </html> ``` 上述示例展示了两个方向上的信息交换过程——从父级到子级以及反过来的情况。注意,在实际应用过程中应当验证接收到的数据及其源头以防止潜在的安全风险如 XSS 攻击等. ### 安全注意事项 当使用 `postMessage()` API 时需要注意安全性问题: - 验证传入的信息是否合法并符合预期格式; - 对事件中的 origin 属性做严格校验,确认它确实来自于可信网站;否则可能遭受恶意脚本攻击。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值