javascript - 通过iframe调用本机组件，如何解析iframe中的内容？

Question

通过网页直接调用可以看到返回结构是{"ret_code": "400", "msg": "xx"}这样的，我通过页面添加iframe的方式也能在开发者工具的元素里看到这个返回的内容，但是通过

      const url = `http://127.0.0.1:8089/getSession`      const iframe = document.createElement('iframe')      iframe.src = url      iframe.style.display = 'none'      document.body.appendChild(iframe)      iframe.onload = function () {        setTimeout(() => {          let doc = document.getElementsByTagName('iframe')[0].contentDocument          console.log(doc)        }, 1000)      }

这样的方式去获取contentDocument是解析不到的，contentDocument==null, 请问有办法获取到这个iframe里的返回结果吗？

Answer 1

要通过iframe调用本机组件并解析iframe中的内容，由于同源策略的限制，您可能会遇到跨域问题。

在您的代码中，您创建了一个隐藏的iframe，并设置了它的src属性以指向本地服务器的URL。然后，您在iframe加载完成后，尝试获取它的contentDocument属性。但是，您发现contentDocument为null，这可能是因为您遇到了跨域问题。

跨域问题是指由于浏览器的同源策略，来自不同源的页面之间的交互受到限制。在这种情况下，您尝试通过iframe加载一个不同源的页面，因此无法直接访问该页面的DOM。

要解决这个问题，您可以考虑以下几种方法：

1. 在服务器端设置适当的CORS（跨源资源共享）策略。通过配置CORS头，允许来自不同源的请求访问您的服务器的资源。这样，您就可以通过iframe加载页面并获取其内容。
2. 使用跨域资源共享（CORS）技术。在您的代码中，您可以通过设置iframe的CORS头来解决跨域问题。在创建iframe时，可以设置它的沙盒属性，并使用适当的CORS头来允许跨域访问。请注意，这只适用于现代浏览器。

const url = `http://127.0.0.1:8089/getSession`const iframe = document.createElement('iframe')iframe.src = urliframe.style.display = 'none'iframe.sandbox = 'allow-same-origin allow-scripts'document.body.appendChild(iframe)iframe.onload = function () {  setTimeout(() => {    let doc = iframe.contentDocument    console.log(doc)  }, 1000)}

3. 考虑使用代理。通过设置一个代理服务器来转发请求并获取响应，您可以将请求包装在一个与目标服务器相同的源中。这样，您就可以绕过同源策略的限制，并从iframe中获取内容。

无论您选择哪种方法，请确保您遵守了适当的安全性和隐私政策。