空的iframe src属性是否有效？

Question

我希望一个 iframe 最开始时的 src 置为空白，然后在页面加载完成后调用一个 JS 函数，并将 src 值设置为实际值。

因此，<iframe src="#" /> 是合法的，或者我需要使用类似于 javascript:; 的其它东西。

- copenndthagen

---

我到处看到 about:blank。 - pimvdb

我相信如果您省略了“src”属性，浏览器会默认使用“about:blank”。 - Jim Blackler

如果您将“src”留空，浏览器会自动解析它。并非所有浏览器都有“about：blank”。 - Rudie

@Jim，安全页面中省略 src 属性会在某些版本的 Internet Explorer 中触发臭名昭著的“此页面包含安全和不安全项”的消息。 - Frédéric Hamidi

我刚刚发现jQuery会因为#作为src而触发两次文档准备事件。花了我相当长的时间才找到原因;-) - Jos

Answer 1

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

- ariel

---

src='about:blank' 在所有主要浏览器中是否都起作用？包括 IE 7/8、Firefox、Safari 和 Chrome 等。 - copenndthagen

IE 9发送一个请求到服务器，路径为“null”，源为“about:blank” :( - powtac

@powtac 它的 src ="" 也是一样的吗？ - NoBugs

Answer 2

HTML5工作草案中，第4.8.2节中指出（强调是我的）：

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

根据RFC 3986，有效的URL必须以方案名称开头，而相对引用不能只包含片段。 因此，#不是一个有效的URL，不应该用作src属性的值。 应使用about:blank代替。

- Frédéric Hamidi

---

不，有效的非空URL需要是RFC3986第4.1节定义的有效URI 引用，而不一定是有效的URI。否则，您将无法将相对URL用作iframe src，这显然是荒谬的。 - mrec

@Mike，你说得对，#也是无效的相对引用。回答已相应更新。 - Frédéric Hamidi

一个Javascript: URI是否有效？就像这样：https://dev59.com/rUrSa4cB1Zd3GeqPUC20 - makerofthings7

顺便提一下，如果您将#用作src值，Chrome会将页面“跳转”到iframe。想象一下，如果您的iframe正上方有一个锚标签<a name="anchor"></a>。Chrome的行为就像您的URL是mypage.html#anchor。 - howcheng

“if present” 表示您还可以完全省略 src 属性（即 <iframe></iframe> 没有 src=）。 - ShreevatsaR

Answer 3

不可以指定一个空的iframe src。

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

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

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

更新于2012年6月8日：

看起来“活动”规范不再将缺少src属性的iframe视为无效：

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

然而，如果这两个属性都未设置，则浏览上下文将默认为about:blank。为了提供适当的向后兼容性，建议详细说明并暂时提供about:blank URL。

- Aron Rotteveel

---

对于那些寻找完整参考或“证明”的人，about:方案已在2010年标准化。 - mindplay.dk

Answer 4

看起来你甚至可以完全省略src属性：

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

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

- rjmunro

---

可能会让你感到困扰的一个问题是，在Chrome中，如果您重新加载父页面，则src =""将导致先前加载的页面重新加载，这可能不是您想要的。about:blank可能更好。 - mindplay.dk

Answer 5

如果您不想使用about:blank，您可以像以下示例一样将javascript用作iframe的src：

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

上述示例将使用深红色背景初始化一个带有简单消息<h3>Results Window</h3>的iframe。然而，您链接的目标应该等于iframe的name属性，例如在该示例中为TV。

注意：

一些外部网站可能会阻止从另一个来源请求其页面。尝试将下面示例中的超链接URL更改为yahoo.com或google.com，并检查您的浏览器控制台。 Jsbin example

- SaidbakR

Answer 6

你可以在src属性中使用about:blank（如ariel之前所述），否则在从安全页面提供服务时会抛出错误。

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

- Naveed Butt

Answer 7

作为URI方案标准的一部分，about:blank可能是最好的选择，因为它在浏览器中得到了很好的支持。

about:blank返回一个带有媒体类型text/html和字符编码UTF-8的空HTML文档。这被广泛用于将空白页面加载到浏览上下文中，例如在HTML中的iframes中，然后可以通过脚本进行修改。您可以在此处查看更多信息

- Selay

Answer 8

你可以尝试通过Javascript添加iframe，这样你就不需要在HTML中有一个空白的iframe了：

（jQuery示例）

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

用Javascript添加iframe可以实现优雅降级 - 没有启用Javascript的用户也不会看到一个空白的iframe。

- whostolemyhat

Answer 9

如果您使用以下方式调用您的 iframe：
javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(VARİABLES,,true,,false,) 则在服务器端可以再次设置 src=""

- user14181715

Answer 10

记录一下

假设下面的例子（Firefox 58，但可能在所有浏览器中都存在）。

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

iframe在CSS之前加载，因此页面的渲染在CSS加载之前就可见。也就是说，在短暂的一瞬间，页面看起来没有CSS。

相反：

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

它运行良好，CSS已加载，最终iframe也已加载。

- magallanes