在vue项目里面如何获取iframe里外部链接的元素(关键词-跨域)

Question

今天又遇到了一个新的问题，在vue项目里面如何获取iframe里外部链接的元素？使用上图的方法报跨域错误

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

您想要解决的问题

您提问的目的是解决在Vue项目中如何获取iframe里外部链接的元素，并且遇到了跨域错误的问题。

图片内容

您上传的图片内容包含了一段JavaScript代码，该代码试图通过Vue的模板语法和DOM操作来获取iframe内的内容。代码中有一个按钮，当点击时会触发testHandle函数。该函数尝试获取一个id为myIframe的iframe元素的contentWindow和document，然后尝试获取iframe内部的某个元素。

问题出现原因

跨域错误通常发生在尝试从一个域（源）访问另一个域（目标）的资源时。在您的案例中，您尝试从一个Vue应用（源）访问iframe中的外部链接元素（目标），但因为源和目标的域不同，浏览器的同源策略阻止了这种跨域访问。

问题解决方案

要解决这个问题，您需要确保源和目标之间的通信是允许的。这通常涉及到以下几种方法：

1. CORS（跨源资源共享）：确保目标服务器设置了适当的CORS头部，允许源服务器进行跨域请求。

2. 代理服务器：在您的Vue应用中设置一个代理服务器，将请求转发到目标服务器，然后再将响应转发回Vue应用。

3. 后端API：通过您的后端服务来进行请求，后端服务可以与目标服务器通信，并将所需数据传递给前端。

4. PostMessage API：使用HTML5的window.postMessage方法在源和目标之间进行通信。

提供代码

考虑到跨域问题，这里提供一个使用postMessage API的示例代码：

// Vue组件内的方法
methods: {
  testHandle() {
    const iframe = document.getElementById('myIframe');
    // 向iframe发送消息
    iframe.contentWindow.postMessage({ action: 'getData' }, 'http://目标服务器域名');
  }
}

// iframe的目标页面需要监听message事件
window.addEventListener('message', function(event) {
  if (event.origin !== "http://源服务器域名") {
    // 确保消息来源是可信的
    return;
  }
  if (event.data.action === 'getData') {
    // 获取需要的数据并发送回去
    const data = document.getElementById('需要获取的元素ID').innerHTML;
    event.source.postMessage({ data: data }, event.origin);
  }
});

代码运行方式

1. 确保您的Vue项目正在运行。
2. 将上述代码集成到您的Vue组件中。
3. 在iframe的目标页面添加事件监听代码。

代码预期运行结果

当点击按钮触发testHandle方法时，Vue应用将向iframe发送一条消息请求数据。iframe页面接收到消息后，将所需元素的数据通过postMessage发送回Vue应用。

推荐相关链接

• MDN Web Docs - postMessage
• MDN Web Docs - CORS
• Vue.js 官方文档 - 跨域
• CORS 详解

请注意，实际的解决方案可能需要根据您的具体场景和服务器配置进行调整。