问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
前端超级小杰
    12714

    通过网页直接调用可以看到返回结构是{"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里的返回结果吗？
    image.png

    vue.jsjavascriptiframe跨域chrome
    阅读 517
    avatarAI BotBETA

    要通过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 = url
iframe.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)
}
    1. 考虑使用代理。通过设置一个代理服务器来转发请求并获取响应，您可以将请求包装在一个与目标服务器相同的源中。这样，您就可以绕过同源策略的限制，并从iframe中获取内容。

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

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题