vue项目获取 iframe 中的DOM元素

最新推荐文章于 2025-06-08 00:03:24 发布

史学娇

最新推荐文章于 2025-06-08 00:03:24 发布

阅读量4.4k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：开发问题文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46151381/article/details/135363836

开发问题专栏收录该内容

9 篇文章

订阅专栏

本文讲述了在Vue应用中，由于安全限制，如何处理同源与不同源iframe之间的跨域问题，介绍了使用$refs和contentWindow/contentDocument属性来获取并操作iframe内容的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意，由于跨域的安全限制，只能访问同源的 iframe 内容。如果 iframe 的源与父组件的源不同，那么在访问其内容时可能会遇到跨域错误。

<template>
  <div>
    <iframe ref="myIframe" src="https://example.com" @load="handleLoad"></iframe>
  </div>
</template>

<script>
export default {
  methods: {
    handleLoad() {
      const iframe = this.$refs.myIframe; // 获取 iframe 元素
      const iframeContent = iframe.contentWindow || iframe.contentDocument; // 获取 iframe 的内容窗口或文档对象

      if (iframeContent) {
        const targetElement = iframeContent.document.getElementById('targetElementId'); // 使用标准的 DOM 操作方法获取目标元素
        console.log(targetElement); // 打印目标元素到控制台
      }
    }
  }
};
</script>