在vue3项目中 内嵌iframe 通过ref能拿到标签里的内容吗?

作者站长头像
站长
· 阅读数 18

在vue3项目中 内嵌iframe 通过ref能拿到标签里的内容吗?大概格式是这样的 <iframe src:'xxx' ref='iframeRef' xxx xxx></iframe> 拿到的ref是<iframe>xxx</iframe> 标签 我想拿到其中一个标签的值 那个标签有id 要通过什么方式拿到呢

iframe.value.contentDocument 拿不到数据 不知道是不是同源策略的问题

回复
1个回答
avatar
test
2024-06-19

在Vue 3项目中,当你通过ref属性来引用一个iframe,你实际上可以获取到iframe元素本身,而不是直接访问其内容。这是因为iframe加载的内容存在于不同的上下文(或称之为不同的“文档”)中,这与包含它的父文档是分开的。

要访问iframe内部的内容,你需要首先确保iframe加载的内容与你的Vue应用遵循同源策略(即,它们的协议、域名和端口号都相同)。如果iframe和你的应用不是同源的,那么出于安全考虑,浏览器的同源策略会阻止你访问iframe内容。

假设iframe和你的Vue应用是同源的,你可以这样访问iframe的内容:

在Vue组件中,使用ref属性给iframe添加一个引用。

<template>
  <iframe ref="myIframe" src="your-iframe-source.html"></iframe>
</template>

在Vue组件的mounted生命周期钩子中,使用这个引用来访问iframe的内容。你可以通过contentWindow属性来访问iframe的窗口对象,然后通过document属性来访问其文档对象。

<script setup>
import { ref, onMounted } from 'vue';

const myIframe = ref(null);

onMounted(() => {
  // 确保iframe已经加载完成
  myIframe.value.onload = () => {
    try {
      const iframeDocument = myIframe.value.contentWindow.document;
      // 现在你可以访问iframe的内容了,例如:
      console.log(iframeDocument.body.innerHTML);
    } catch (error) {
      console.error("无法访问iframe内容:", error);
    }
  };
});
</script>

请注意,即使是同源的情况,也可能因为浏览器的安全策略、iframe的加载状态等因素,导致访问iframe内容时遇到问题。确保在尝试访问内容之前,iframe已经加载完成,这可以通过监听iframe的load事件来实现。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容