Html iframe 内容无法出现在 Firefox 中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18373592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:27:29  来源:igfitidea点击:

iframe contents cant appear in Firefox

htmlfirefoxiframe

提问by bsm

Below is my code:

下面是我的代码:

<div style="border: solid 1px #000000; margin: 5px;">
  <iframe src="http://www.w3schools.com" width="100%" height="300px" scrolling="yes"><p>Your browser does not support iframe.</p></iframe>     
</div>   

Contents of iframe works well in chrome but not in firefox. I've disabled add-ons but my iframe is still empty. Can anyone please help me?

iframe 的内容在 chrome 中运行良好,但在 Firefox 中不起作用。我禁用了附加组件,但我的 iframe 仍然是空的。谁能帮帮我吗?

回答by Keyser Soze

If you are trying to add this Iframe on a SSL-encrypted website (https://), it won't work any more since Firefox 23 because Mozilla has decided to blocked all unencrypted content on encrypted websites (for example http-iframes on https-websites). You can change this behaviour in your own Firefox installation by typing about:configin the address bar and setting security.mixed_content.block_active_contentto false. But that won't help you for all other FF23-visitors on your website.

如果您尝试在 SSL 加密的网站 (https://) 上添加此 Iframe,自 Firefox 23 起它就不再起作用,因为 Mozilla 已决定阻止加密网站上的所有未加密内容(例如 http-iframes on https-网站)。您可以通过about:config在地址栏中键入并设置security.mixed_content.block_active_content为 ,在您自己的 Firefox 安装中更改此行为false。但这对您网站上的所有其他 FF23 访问者无济于事。

回答by Giacomo Penuti

As of 05/2018, the iframe lead is denied by browser due to X-Frame-Options header set to 'sameorigin'.

截至 05/2018,由于 X-Frame-Options 标头设置为“sameorigin”,浏览器拒绝了 iframe 线索。

Tested the page with Firefox and getting blank iframe. Here is what console says:

使用 Firefox 测试页面并获得空白 iframe。这是控制台所说的:

Load denied by X-Frame-Options: https://www.w3schools.com/ does not permit cross-origin framing.

Why that?I'll give Chrome console a chance, here's what it says:

为什么会这样?我会给 Chrome 控制台一个机会,它是这样说的:

Refused to display 'https://www.w3schools.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Basically, X-Frame-Options header (do not confuse that with CORS), is set to 'sameorigin', that means that the browser is allowed to display the iframe content only if embedded in same domain and same protocol (https://www.w3schools.com/is not sameorigin of http://www.w3schools.com/).

基本上,X-Frame-Options 标头(不要将其与 CORS 混淆)设置为“sameorigin”,这意味着只有嵌入到相同域和相同协议(https:// www.w3schools.com/http://www.w3schools.com/ 不同)。

Here are some docs aboiut x-frame-options: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

这里有一些关于 x-frame-options 的文档:https: //developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

回答by Kuzgun

I don't know if its related but when I try to request w3schools by c# it responses 503 forbidden error. So they may use something to prevent showing up on iframes, etc. Facebook has similiar restrictions, you cannot display their likebox iframe unless you log in.

我不知道它是否相关,但是当我尝试通过 c# 请求 w3schools 时,它会响应 503 forbidden 错误。所以他们可能会使用一些东西来防止出现在 iframe 等上。Facebook 有类似的限制,除非你登录,否则你不能显示他们的 likebox iframe。

回答by Berty

I had the same issue. For me the cause was a trailing slash at the end of the url.

我遇到过同样的问题。对我来说,原因是 url 末尾的斜杠。

Doesn't work:

不起作用:

<iframe src="http://example.com/some/sub/folder/"></iframe>

Works:

作品:

<iframe src="http://example.com/some/sub/folder"></iframe>

回答by MarioE

Why no one has mentioned CORS yet?

为什么还没有人提到 CORS?

FROM mdn

MDN

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.

An example of a cross-origin request: A HTML page served from http://domain-a.commakes an src request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images, and scripts from separate domains, such as content delivery networks (CDNs).

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request HTTP resources from the same domain the application was loaded from unless CORS headers are used.

跨源资源共享 (CORS) 是一种机制,它使用额外的 HTTP 标头让用户代理获得从与当前使用的站点不同的源(域)上的服务器访问所选资源的权限。当用户代理从不同于当前文档来源的域、协议或端口请求资源时,它会发出跨域 HTTP 请求。

一个跨来源请求的例子:从为其提供服务的HTML页面 http://domain-a.com使一个SRC请求 http://domain-b.com/image.jpg。当今网络上的许多页面都从不同的域(如内容交付网络 (CDN))加载 CSS 样式表、图像和脚本等资源。

出于安全原因,浏览器会限制从脚本内发起的跨源 HTTP 请求。例如,XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一域中请求 HTTP 资源,除非使用 CORS 标头。

This means that the websites you are trying to enter from the iframe are set to deny requests from your site or others (if not all).

这意味着您尝试从 iframe 进入的网站被设置为拒绝来自您的网站或其他网站(如果不是全部)的请求。

回答by slavo micik

You need to have source file of iframe on localhost.

您需要在本地主机上拥有 iframe 的源文件。

Firefox and Chrome doesn't display this iframe:

Firefox 和 Chrome 不显示此 iframe:

<iframe src="https://www.yourdomain.com/form.html"></iframe>

Works:

作品:

<iframe src="/form.html"></iframe>