空的iframe src是否有效？

73

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

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

— 测试电视
source

1

我about:blank随处可见。

— pimvdb

1

我相信，如果您忽略src浏览器的默认属性为about:blank。

— 吉姆·布莱克勒

您src一无所获，浏览器会找出答案。并非所有浏览器都可能带有about:blank。

— 鲁迪

1

@Jim，src在安全页面中省略该属性将在Internet Explorer的某些版本中触发臭名昭著的“此页面同时包含安全和不安全的项目”消息。

— 弗雷德里克·哈米迪

1

我刚刚发现jQuery将两次触发文档就绪事件，因为＃作为src。花了我一段时间才找到；-)

— JosFabre

107

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

— 阿里尔
source

5

src ='about：blank'是否可在所有主要浏览器中使用... IE 7/8，FF，Safari，Chrome等

— testndtv 2011年

5

IE 9将请求发送到路径为“ null”的服务器，并带有src =“ about：blank” :(

— powtac 2012年

@powtac是否与src =“”相同？

— NoBugs 2013年

51

HTML 5工作草案第4.8.2节说（强调我的意思）：

该src属性提供嵌套浏览上下文要包含的页面的地址。该属性（如果存在）必须是一个有效的非空URL，可能用空格包围。

根据RFC 3986，有效URL必须以方案名称开头，并且相对引用不能仅包含片段。

因此，#不是有效的URL，并且不应将其用作src属性的值。

使用about：blank代替。

— 弗雷德里克·哈米迪（FrédéricHamidi）
source

5

不，有效的非空URL必须是RFC3986第4.1节定义的有效URI引用，不一定是有效URI。否则，您不能将相对网址用作iframe src，这显然是胡说八道。

— mrec

@Mike，您是对的，并且#也是无效的相对参考。答案已相应更新。

— 弗雷德里克·哈米迪

Javascript：URI有效吗？像这样：stackoverflow.com/q/1689215/328397

— Halfbit

附带说明一下，如果您#将src值用作src值，Chrome会将页面“跳转”到iframe。假设您在<a name="anchor"></a>iframe上方是否有一个定位标记。Chrome的行为就像您的URL是mypage.html#anchor。

— 2014年

“如果存在”表示您还可以src完全省略该属性（<iframe></iframe>不带src=）。

— ShreevatsaR

25

不，指定空的iframe src是无效的。

您应该使用<iframe src="about:blank" />。

#是指对当前页面内的锚点的引用（或在处理AJAX请求时通常用作路由方案）。将其用作iframe的源将是毫无意义的，因为iframe不会引用当前页面上的内容，也不会与AJAX请求一起使用。

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

2012年6月8日更新：

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

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

但是，如果这两个属性均未设置，则浏览上下文将默认为about:blank。为了提供适当的向后兼容性，建议您提供详细的信息，并提供about:blankURL。

— 阿伦·罗特维（Aron Rotteveel）
source

1

对于那些寻求完整参考或“证明”的人，该about:计划于2010

— 实现了

10

看来您也可以完全省略src：

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

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

— 里门罗
source

1

可能会使您绊倒的烦恼是Chrome，src=""如果您重新加载父页面，则可能会导致以前加载的页面重新加载，这可能不是您想要的。about:blank可能是更好的选择。

— mindplay.dk

2

如果你不希望使用about:blank您可以使用JavaScript为src你iframe像下面的例子：

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

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

注意：

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

JSBIN示例

— 赛义德巴克
source

1

您可以about:blank在src属性中使用（如ariel前面所述），否则从安全页面投放时会引发错误。

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

— 幼稚的屁股
source

1

您可以尝试通过Javascript添加iframe，因此无需在HTML中添加空白：

（jQuery示例）

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

使用Javascript添加iframe可以正常降级-没有Javascript的用户将看不到空白的iframe。

— 恶意帽子
source

1

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

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

— 塞莱
source

0

作为记录

让我们说下一个示例（Firefox 58，但可能出现在所有浏览器中）。

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

在css之前先加载iframe，以便在加载css之前可以看到页面的呈现。即一秒钟，该页面看起来没有CSS。

代替：

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

它工作正常，css已加载，iframe最终已加载。

— 马加拉内斯
source