【问题标题】:javascript xhr load iframe in responsejavascript xhr 加载 iframe 作为响应
【发布时间】:2015-09-02 21:39:59
【问题描述】:

有没有人知道如何让这个 XHR 请求响应将 .php 文件加载到 iframe 中而不是直接加载?

var xhr= new XMLHttpRequest();
    xhr.open('GET', 'http://derrick.dk/ogmobi/facebook/contentLockerFacebook.php', true);
    xhr.onreadystatechange= function() {
        if (this.readyState!==4) return;
        if (this.status!==200) return;
        document.getElementsByTagName('body')[0].innerHTML = document.getElementsByTagName('body')[0].innerHTML + this.responseText;    
};
xhr.send();

【问题讨论】:

  • 为什么不直接设置 iframe 的src
  • 现代浏览器不允许将凭据传递给

标签: javascript ajax iframe xmlhttprequest


【解决方案1】:

替换这个:

document.getElementsByTagName('body')[0].innerHTML = document.getElementsByTagName('body')[0].innerHTML + this.responseText;

用这个:

var iframe = document.createElement('iframe');
iframe.srcdoc = this.responseText;
iframe.src = "data:text/html;charset=utf-8," + escape(this.responseText);
document.body.appendChild(iframe);

或者,如果您只想在 iFrame 中显示页面而不发出 XHR 请求。只需将其用作您的代码:

var iframe = document.createElement('iframe');
iframe.src = 'http://derrick.dk/ogmobi/facebook/contentLockerFacebook.php';
document.body.appendChild(iframe);

【讨论】:

  • 有人告诉我,使用 XMLHttpRequest 的 html 响应不能轻易地显示在 iframe 中。我花了 2 个小时,这篇文章证明它是错误的。
  • 我很好奇 CORS 和 CSP 如何影响这种方法。
  • @Dai data:text/html 选项将要求您从相同的域名或 CORS 白名单域中请求,并且您需要拥有 CSP 允许的数据 URL。将 src 设置为 URL 的选项将要求 iFrame 的 URL 由父页面上的 frame-src 指令允许,并且父 URL 需要由 frame-ancestors 允许。
  • iframe 是否会继承与父页面相同的 CSP 规则?
  • @Eric 否,作为防止父页面修改 iframe 内页面行为的安全功能,iframe 内的页面不受父页面的 CSP 规则约束,具有iframe 页面只能从受父页面 CSP 约束的 URL 加载的例外。如果您想在嵌入页面上强制使用 CSP,则 iframe 有一个草稿“csp”属性,允许您仅在其 CSP 至少与您在属性中包含的 CSP 一样严格时才加载页面:developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/csp
猜你喜欢
  • 1970-01-01
  • 2015-04-24
  • 2012-11-08
  • 2021-04-17
  • 2016-10-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多