实现iframe内嵌页面与父页面通讯

最新推荐文章于 2021-06-14 18:31:06 发布

100斤的狗

最新推荐文章于 2021-06-14 18:31:06 发布

阅读量437

点赞数

分类专栏： vue jsx渲染 iframe

本文链接：https://blog.csdn.net/weixin_46115860/article/details/107712478

版权

vue 同时被 3 个专栏收录

20 篇文章 1 订阅

订阅专栏

jsx渲染

2 篇文章 0 订阅

订阅专栏

iframe

1 篇文章 0 订阅

订阅专栏

详细介绍地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

iframe内嵌页面发送数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
</head>
<body>
    <div class="container">
        <span>
            <p>页面将在<p class="timer">3</p>秒后自动关闭</p>
        </span>
    </div>
    <script>
        let count = 3;
        setInterval(() => {
          count--;
          document.getElementsByClassName('timer')[0].innerHTML = count;
          if (count === 0) {
          //向父页面发送数据，参数包括message（发送数据内容）和targetOrigin（其值可以是字符串"*"（表示无限制）或者一个URL）
            window.parent.postMessage('error', '*');
          }
        }, 1000);
    </script>
</body>

</html>

父页面监听

<script>
export default {
  name: 'FilePreview',
  data() {
    return {
    
    };
  },
  mounted() {
    /**
     * 监听iframe内嵌页面的message通讯
     */
    window.addEventListener('message', (e) => {
      const { data } = e;
      if (data === 'error') {
      //此处写需要执行的方法
      console.log('dddd');
      }
    });
  },
  render() {
    return (
        <div class='file-preview-wrapper' >
            <iframe 
              title="文件预览"
              width="100%"
              height="100%"
              frameborder="0" 
              scrolling="auto"
              src='xxxxxxxxx内嵌页面地址'>
            </iframe>
        </div>
      ) 
  },
};
</script>

<style lang="scss" >
@import "./index.scss";
</style>

100斤的狗

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现iframe内嵌页面与父页面通讯

详细介绍地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessageiframe内嵌页面发送数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫