javascript - 使用 AJAX 加载的 iframe 代码未加载

Question

我有以下 iframe 代码，通过 AJAX 传输到页面:

<iframe sandbox="allow-forms allow-scripts" id="iframe-content" src="http://www.example.com" scrolling="yes" style="padding-top:40px;border:0;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:#74A82A;"></iframe>

然后将其写入页面，如下所示:

$("#bottom").html(data);

我检查了该页面，它正在将新代码成功加载到 div 中。

但是由于某种原因它没有加载页面？ Iframe 仅显示绿色背景色。

如何让这个 iframe 加载页面？

理想情况下，我希望传输所有 iframe 代码，因为我需要为不同的场景创建不同版本的 iframe。

Answer 1

"The page at 'examplemysite.com'; was loaded over HTTPS, but requested an insecure resource 'http//www.example.com'. This request has been blocked; the content must be served over HTTPS.

Seems because I am on https that I can't load http?

正确。

浏览器正在采取越来越严格的措施来防止混合安全和不安全的内容。

过去，他们会弹出有关混合安全和不安全内容的警告，以警告用户该页面可能并不像看起来那么安全。

如今，他们倾向于完全拒绝不安全的内容(大概是因为太多用户对比“这是/不安全”更复杂的事情感到困惑)。

如果您想显示来自其他域的内容，那么您需要通过 HTTPS 请求它(显然这只有在他们安全提供的情况下才有可能)，或者在纯 HTTP 上托管您的页面。

<小时/>

I tried putting my page on http and it now says this No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'examplemysite.com'; is therefore not allowed access.

这是一个与您未包含在问题中的其他代码不同的问题。据推测它位于您嵌入 iframe 的页面中。

处理访问控制允许来源问题是 well documented在 many different关于 Stackoverflow 的问题。