Iframe中的页面如何调用引用Iframe页面里的函数

qq_52579875

于 2024-04-23 19:29:15 发布

阅读量455

点赞数 2

文章标签：前端前端框架 vue

本文链接：https://blog.csdn.net/qq_52579875/article/details/138136147

版权

在Vue.js中，如果你想要在<iframe>内部调用父级组件的方法（如onClose），你需要确保能够跨域通信，因为同源策略通常阻止这种直接调用。不过，有几种方法可以实现这一目标：

1.使用`postMessage`

你可以在<iframe>内使用window.parent.postMessage来发送消息，然后在父组件中监听message事件，并在事件处理函数中调用onClose方法。

在Iframe内部：

// 假设iframe内部有一个按钮，点击时发送消息给父级
document.getElementById('closeButton').addEventListener('click', function() {  

  window.parent.postMessage({ action: 'close' }, '*'); // 发送消息给父窗口  

});

在父组件中：

<template>  

  <div>  

    <lk-drawer  

      :visible="visible"  

      @close="onClose"  

      @message="handleMessage" <!-- 监听来自iframe的消息 -->  

    >  

      <iframe src="http://172.27.0.87:8080/#/sys/role" frameborder="0" class="iframe-page" style="width: 100%;"></iframe>  

    </lk-drawer>  

  </div>  

</template>  

  

<script>  

export default {  

  data() {  

    return {  

      visible: false,  

    };  

  },  

  methods: {  

    onClose() {  

      // 关闭抽屉的方法  

      this.visible = false;  

    },  

    handleMessage(event) {  

      if (event.data.action === 'close') {  

        this.onClose(); // 调用onClose方法  

      }  

    }  

  },  

  mounted() {  

    window.addEventListener('message', this.handleMessage); // 添加事件监听  

  },  

  beforeDestroy() {  

    window.removeEventListener('message', this.handleMessage); // 组件销毁前移除事件监听  

  }  

};  

</script>

2.通过URL参数或查询字符串

如果<iframe>加载的页面和父组件在同一个域下，你也可以通过修改URL的查询字符串或哈希来传递关闭的信号，并在父组件中监听URL变化来调用onClose方法。不过，这种方式通常不适用于跨域情况，因为浏览器会阻止不同源之间的URL读取。

3.使用第三方库

当使用postMessage时，请确保仔细验证从<iframe>接收到的消息，以防止安全漏洞，比如XSS攻击。
如果<iframe>加载的页面与父页面不在同一个域下，你需要确保该页面允许通过postMessage接收消息。这通常通过设置Access-Control-Allow-Origin响应头来实现，但这通常不适用于<iframe>，因为它通常是由浏览器控制的。
跨域通信时，确保你理解并遵守相关的安全最佳实践。