iframe中父子域名各不同,如何让子页面可以访问自己的cookie
时间: 2024-03-27 20:39:36 浏览: 145
子页面访问父页面 和 跨iframe访问
由于同源策略的限制,子页面无法直接访问父页面的 cookie,但是可以通过一些技巧来实现子页面访问自己的 cookie。
一种常用的方法是在父页面中使用 postMessage API 向子页面发送消息,消息中包含子页面需要访问的 cookie 信息,子页面在接收到消息后,可以将 cookie 存储在自己的 localStorage 中,这样就可以在子页面中访问到了。
具体方法如下:
在父页面中:
```javascript
// 获取cookie
var cookie = document.cookie;
// 向子页面发送消息
var iframe = document.getElementById('myiframe');
iframe.contentWindow.postMessage(cookie, 'http://子页面的域名');
```
在子页面中:
```javascript
// 接收消息
window.addEventListener('message', function(event) {
if (event.origin === 'http://父页面的域名') {
// 存储cookie到localStorage中
localStorage.setItem('cookie', event.data);
}
});
// 获取cookie
var cookie = localStorage.getItem('cookie');
```
需要注意的是,这种方法存在一定的安全风险,因为 cookie 信息可能包含敏感信息,需要在传输过程中做好加密和安全校验。
阅读全文