有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

iframe跨域传值(实现方式)解决方案

javascript 炮渣日记 4周前 (11-11) 29次浏览 已收录 0个评论 扫描二维码

背景

页面A通过iframe嵌套页面B,两个页面端口不同,想要从页面A点击事件调用页面B的方法。

实现

页面A

<iframe ref="iframe" id="child" scrolling="auto" width="100%" height="100%" frameborder="0"></iframe>

主要应用 postMessage方法,第一个参数是将要发送到其他window的数据,第二个参数是指定哪些窗口能接收到消息事件,可以传字符串 “*” 表示无限制,或者是一个URI。

window.addEventListener("click"e => {
      console.log("向iframe子组件发送");
      document.getElementById("child").contentWindow.postMessage("测试""*");
    });

页面B

window.addEventListener("message",
      function(event{
        console.log("iframe收到");
        console.log(event)
        that.setSeen = false;
        that.$nextTick(() => {
          that.$forceUpdate();
        });
      }, false
);
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址