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

Question

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

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

Answer 1

在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事件来实现。

Answer 2

vue ref 拿到的是 Dom

从这里开始就和 vue 没关系了

contentDocument 这个 api 就是 dom 自带的，拿不到就是因为跨域了。比如说可以通过domain来解决。

也可以通过 postmessage 方案