Javascript 空的 iframe src 是否有效?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5946607/
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-23 19:37:48  来源:igfitidea点击:

Is an empty iframe src valid?

javascripthtmlcssiframe

提问by testndtv

I want an iframe to initially have srcas blank and then once the page loads; call a JS function and then set the srcvalue to an actual one..

我希望 iframe 最初src为空白,然后在页面加载后;调用 JS 函数,然后将src值设置为实际值。

So is <iframe src="#" />valid OR do I need to use something else like javascript:;, etc

所以是<iframe src="#" />有效的还是我需要使用其他的东西javascript:;,等等

回答by ariel

just <iframe src='about:blank'></iframe>

只是 <iframe src='about:blank'></iframe>

回答by Frédéric Hamidi

The HTML 5 working draft, section 4.8.2, says (emphasis mine):

HTML 5 工作草案,第 4.8.2 节说(强调我的):

The srcattribute gives the address of a page that the nested browsing context is to contain. The attribute, if present, must be a valid non-empty URLpotentially surrounded by spaces.

src属性给出了嵌套浏览上下文要包含的页面地址。该属性(如果存在)必须是可能被空格包围的有效非空 URL

According to RFC 3986, valid URLs must begin with a scheme name, and relative references cannot only consist in a fragment.

根据RFC 3986,有效的 URL 必须以方案名称开头,并且相对引用不能只包含在片段中

Therefore, #is not a valid URL, and should not be used as the value of the srcattribute.

因此,#不是有效的 URL,不应用作src属性的值。

Use about:blankinstead.

使用about:blank代替。

回答by Aron Rotteveel

No, it is not validto specify an empty iframe src.

不,指定空 iframe src无效

You should use <iframe src="about:blank" />.

你应该使用<iframe src="about:blank" />.

#is ment to be a reference to an anchor within the current page(or, often used as a routing scheme when working with AJAX requests). Using it as the source of an iframe would be senseless, since an iframe does not reference content on the current page and is not used with AJAX requests.

#对当前页面中锚点引用(或者,在处理 AJAX 请求时通常用作路由方案)。使用它作为 iframe 的源是没有意义的,因为 iframe 不引用当前页面上的内容,也不用于 AJAX 请求。

about:blankis a cross-browser standardto display a blank document.

about:blank是显示空白文档的跨浏览器标准

Update June 8th 2012:

2012 年 6 月 8 日更新:

It seems that the 'living' specno longer renders an iframe invalid if the srcattribute is missing:

如果缺少该属性,“活动”规范似乎不再使 iframe 无效src

If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be resolved, the browsing context will remain at the initial about:blank page.

如果在创建元素时未设置 srcdoc 属性,并且 src 属性也未设置或设置但其值无法解析,则浏览上下文将保留在初始 about:blank 页面。

If both of these attributes, however, are not set, the browsing context will default to about:blank. To provide proper backwards compatibility, it's recommendable to be verbose and, for now, provide the about:blankurl.

但是,如果未设置这两个属性,则浏览上下文将默认为about:blank。为了提供适当的向后兼容性,建议详细说明,现在提供about:blankurl。

回答by rjmunro

It looks like you can also leave out the src completely:

看起来您也可以完全省略 src :

http://dev.w3.org/html5/spec/Overview.html#the-iframe-element

http://dev.w3.org/html5/spec/Overview.html#the-if​​rame-element

If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not setor set but its value cannot be resolved, the browsing context will remain at the initial about:blank page.

如果在创建元素时未设置srcdoc 属性,并且 src 属性也未设置或设置但其值无法解析,则浏览上下文将保留在初始 about:blank 页面。

回答by SaidbakR

If you don't want to use about:blankyou may use javascript as an srcfor your iframelike the following example:

如果你不想使用about:blank你可以使用 javascript 作为srciframe喜欢下面的例子:

<iframe name="TV" id="tv" style="width:100%; background: #800000" src="javascript:document.write('<h3>Results Window</h3>')"></iframe>

The above example will initialize an iframewith maroon background that has a simple message <h3>Results Window</h3>. However, the targets of your links should equals the iframenameattribute i.e in that example TV.

上面的例子将初始化一个iframe带有简单消息的栗色背景<h3>Results Window</h3>。但是,您链接的目标应该等于该iframename示例中的属性 ie TV

Notice:

注意:

Some external website may block requesting their pages from another origin. Try to change the URLs of the hyperlinks in the example below to yahoo.comor google.com, for example, and checkout your browser's console.

某些外部网站可能会阻止从其他来源请求其页面。例如,尝试将以下示例中的超链接的 URL 更改为yahoo.comgoogle.com,然后查看浏览器的控制台。

Jsbin example

jsbin 示例

回答by Selay

As part of the about URI scheme standard, about:blank is probably the best option as it has very good browser support.

作为 about URI 方案标准的一部分,about:blank 可能是最好的选择,因为它具有非常好的浏览器支持。

about:blank Returns a blank HTML document with the media type text/html and character encoding UTF-8. This is widely used to load blank pages into browsing contexts, such as iframes within HTML, which may then be modified by scripts. You can see further here

about:blank 返回媒体类型为 text/html 和字符编码为 UTF-8 的空白 HTML 文档。这被广泛用于将空白页面加载到浏览上下文中,例如 HTML 中的 iframe,然后可以通过脚本进行修改。 你可以在这里看到更多

回答by Naveed Butt

You can use about:blankin the srcattribute (as mentioned by ariel earlier), otherwise it would throw an error when serving from a secure page.

您可以about:blanksrc属性中使用(如 ariel 之前提到的),否则从安全页面提供服务时会引发错误。

A secure page httpswould throw an error of possibly un-secure data on the secure website.

安全页面https会在安全网站上抛出可能不安全数据的错误。

回答by whostolemyhat

You could try adding the iframe through Javascript, so you wouldn't need to have a blank one in the HTML:

您可以尝试通过 Javascript 添加 iframe,这样您就不需要在 HTML 中有一个空白的:

(jQuery example)

(jQuery 示例)

<script type="text/javascript">
$().ready(function() {
    $("<iframe />").attr("src", "http://www.bbc.co.uk/").appendTo("body");
});
</script>

Adding the iframe with Javascript allows graceful degradation - users without Javascript won't see a blank iframe.

添加带有 Javascript 的 iframe 允许优雅降级 - 没有 Javascript 的用户不会看到空白的 iframe。

回答by magallanes

For the record

作为记录

Let's say the next example (Firefox 58 but may be its present in all browsers).

假设下一个示例(Firefox 58,但可能存在于所有浏览器中)。

<link href="css.css" rel="stylesheet" type="text/css"/>
<iframe src='about:blank'></iframe>

Iframe is loaded BEFORE the css so the render of the page is visible before the css is loaded. I.e. for a split of a second, the page looks without a css.

iframe 在 css 之前加载,因此页面的渲染在 css 加载之前是可见的。即一瞬间,页面看起来没有 css。

Instead:

反而:

<link href="css.css" rel="stylesheet" type="text/css"/>
<iframe src='blank.html'></iframe>

It works fine, the css is loaded and the iframe is loaded finally.

它工作正常,加载了 css,最后加载了 iframe。