在vue3项目中 内嵌iframe 通过ref能拿到标签里的内容吗？-灵析社区

走你啊啊啊啊啊

在Vue 3项目中，当你通过ref属性来引用一个iframe，你实际上可以获取到iframe元素本身，而不是直接访问其内容。这是因为iframe加载的内容存在于不同的上下文（或称之为不同的“文档”）中，这与包含它的父文档是分开的。 要访问iframe内部的内容，你需要首先确保iframe加载的内容与你的Vue应用遵循同源策略（即，它们的协议、域名和端口号都相同）。如果iframe和你的应用不是同源的，那么出于安全考虑，浏览器的同源策略会阻止你访问iframe内容。 假设iframe和你的Vue应用是同源的，你可以这样访问iframe的内容： 在Vue组件中，使用ref属性给iframe添加一个引用。 在Vue组件的mounted生命周期钩子中，使用这个引用来访问iframe的内容。你可以通过contentWindow属性来访问iframe的窗口对象，然后通过document属性来访问其文档对象。 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); } }; }); 请注意，即使是同源的情况，也可能因为浏览器的安全策略、iframe的加载状态等因素，导致访问iframe内容时遇到问题。确保在尝试访问内容之前，iframe已经加载完成，这可以通过监听iframe的load事件来实现。