iframe父子页面互相传参

最新推荐文章于 2024-05-13 13:33:11 发布

李鹍

最新推荐文章于 2024-05-13 13:33:11 发布

阅读量376

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_26957821/article/details/125816122

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//向父页面传参  内容格式自定义
window.parent && window.parent.postMessage( {
from: 'iframe',
to: 'parent',
type: 'saveEnd'
}, '*' 
);

//父子页面接收参数都使用这个
  window.addEventListener("message", function (event) {

      console.log(event)
})

//父页面传给iframe
 const iframes = parent.document.getElementsByTagName('iframe');
        const iframe = iframes[0];
        const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
          input !== null && input.tagName === 'IFRAME';
        if (isIFrame(iframe) && iframe.contentWindow) {
          iframe.contentWindow.postMessage({
            from: 'parent',
            to: 'iframe',
            type: 'save',
            data: ''
          }, '*');
        }