美文网首页
Iframe内嵌

Iframe内嵌

作者: 莣忧草_3b53 | 来源:发表于2021-05-26 10:50 被阅读0次

一 嵌入方

1.1. 嵌入方式
<template>
  <div class="iframe-container">
     <iframe id="iframePage" ref="iframePage" class="sys-frame" src=""></iframe>
  </div>
</template>
1.2. 接收消息
window.addEventListener("message", receiveMessage, false);

function receiveMessage (event) {
  let data = event.data;
  console.log(data)
}

二 被嵌入方

2.1.发送消息
// 发送postMessage
let iframe = this.$refs.iframePage;
iframe.src = '****';
let self = this;
if (iframe.attachEvent) {
    iframe.attachEvent("onload", function () {
        self.$refs.iframePage.contentWindow.postMessage(data,*);
    });
} else {
    iframe.onload = function () {
        self.$refs.iframePage.contentWindow.postMessage(data, *');
    };
}

相关文章

  • PHP从入门到精通，016第二章HTML-HTM的核心标记之内嵌

    二、HTML的核心标记 （十五）、内嵌框架 语法： 常用...

  • Iframe内嵌

    一 嵌入方 1.1. 嵌入方式 1.2. 接收消息 二 被嵌入方 2.1.发送消息

  • 关于HTML的几个标签

    iframe标签 iframe标签会在当前页面内嵌套一个页面，这个页面可以通过CSS来控制大小。 iframe标签...

  • Iframe内嵌框架

    1.