iframe的一些问题

1、iframe嵌入同源页面，共享父页面cookie

export const getIframeCookie = () => {
  document.getElementById('my-iframe').onload = function () {
    let iframeDocument = this.contentDocument || this.contentWindow.document;
    let iframeCookies = iframeDocument.cookie;
    console.log('Cookies from iframe:', iframeCookies);
  };
};

export const getParentCookie = () => {
  let parentCookies = document.cookie;
  console.log('Cookies from parent:', parentCookies);
};

打印结果相同

同源能获取 

2、iframe嵌入非同源页面 （待实验，并存入cookies）

这里明天来实验，暂时没有有非同源的页面来实验

非同源获取cookie都报错，更何况存入cookie 

3、iframe与父页面间的相互通信

这里实验了百度ai提供的代码，以及网友实践的代码。为什么要写3.1算是记录自己踏坑的过程。

3.1 百AIi给出的代码实现 （AI不靠谱，经实验得出结论，审慎对待ai代码）

目前实验结果，可以互相通信；但是同一父页面，只能进行单向通信；

要么父页面postmessage，子页面监听

parent
export const parentPostMessage = () => {
  console.log('parentPostMessage', 'hello parentPostMessage');
  window.postMessage({ message: 'hello parentPostMessage' }, '*'); // 第二个参数是接收消息的域，'*'表示接受任何域
};

iframe
export const iframeReceiveMessage = () => {
  window.parent.addEventListener(
    'message',
    function (event) {
      // if (event.origin !== 'http://example.org') return; // 可选：检查消息来源
      console.log('iframe Received message:', event.data, this.window);
    },
    false,
  );
};

要么子页面post message，父页面监听

#iframe  window.parent 这里的写法我有点疑惑，这不是获取的父级window吗？但是我写window.self不生效
export const iframePostMessage = () => {
  console.log('iframePostMessage', 'hello iframePostMessage');
  window.parent.postMessage({ message: 'hello iframePostMessage' }, '*'); // 第二个参数是接收消息的域，'*'表示接受任何域
};
#parent
export const parentReceiveMessage = () => {
  window.addEventListener(
    'message',
    function (event) {
      // if (event.origin !== 'http://example.org') return; // 可选：检查消息来源
      console.log('parent Received message:', event.data, this.window);
    },
    false,
  );
};

如若结合以上两段代码，在父页面post message，父页面和子页面都可以监听到；同样，在子页面postmessage，父页面和子页面都可以监听到。

3.2 网友给出的代码实现  （靠谱）

父传子

父
export const parentPostMessage = () => {
  console.log('parentPostMessage', 'hello parentPostMessage');
  let iframe = document.getElementById('my-iframe');
  iframe?.contentWindow?.postMessage('hello parentPostMessagetoiframe', '*');
};
子
export const iframeReceiveMessage = () => {
  window.self.addEventListener(
    'message',
    function (event) {
      // if (event.origin !== 'http://example.org') return; // 可选：检查消息来源
      console.log('iframe Received message:', event.data);
    },
    false,
  );
};

子传父

#iframe  window.parent 这里就很好理解了，同级的window post & listen
export const iframePostMessage = () => {
  console.log('iframePostMessage', 'hello iframePostMessage');
  window.parent.postMessage({ message: 'hello iframePostMessage' }, '*'); // 第二个参数是接收消息的域，'*'表示接受任何域
};
#parent
export const parentReceiveMessage = () => {
  window.addEventListener(
    'message',
    function (event) {
      // if (event.origin !== 'http://example.org') return; // 可选：检查消息来源
      console.log('parent Received message:', event.data, this.window);
    },
    false,
  );
};

结合两段代码，父子互相传

参考：