空的 iframe src 是否有效？答案

【问题标题】：Is an empty iframe src valid?空的 iframe src 是否有效？
【发布时间】：2023-04-05 13:37:01
【问题描述】：

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

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

【问题讨论】：

我到处都能看到about:blank。
我相信如果你省略src属性浏览器默认为about:blank。
如果您将src 留空，浏览器会自动识别。并非所有浏览器都有about:blank。
@Jim，在安全页面中省略 src 属性将在某些版本的 Internet Explorer 中触发臭名昭著的“此页面包含安全和不安全项目”消息。
我刚刚发现 jQuery 将触发文档就绪事件两次，因为 # 作为 src。我花了很长时间才知道 ;-)

标签： javascript html css iframe

【解决方案1】：

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

【讨论】：

src='about:blank' 是否适用于所有主流浏览器...IE 7/8、FF、Safari、Chrome 等
IE 9 向服务器发送请求，路径为“null”，src="about:blank" :(
@powtac 对 src="" 也一样吗？

【解决方案2】：

不，无效指定一个空的 iframe src。

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

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

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

2012 年 6 月 8 日更新：

如果缺少src 属性，'living' spec 似乎不再使 iframe 无效：

如果在创建元素时没有设置 srcdoc 属性，并且 src 属性也未设置或已设置但其值不能被解决，浏览上下文将保持在初始状态 about:空白页。

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

【讨论】：

对于那些寻求完整参考或“证明”的人，about: 方案是 2010 年的standardized。

【解决方案3】：

您可以在src 属性中使用about:blank（正如ariel 前面提到的），否则在从安全页面提供服务时会引发错误。

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

【讨论】：

【解决方案4】：

HTML 5 工作草案 section 4.8.2 说（强调我的）：

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

根据RFC 3986，有效的网址必须以scheme name开头，并且相对引用不能只包含在fragment中。

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

请改用about:blank。

【讨论】：

不，有效的非空 URL 必须是 RFC3986 第 4.1 节定义的有效 URI reference，不一定是有效的 URI。否则不能使用相对 URL 作为 iframe src，这显然是无稽之谈。
@Mike，你是对的，# 也是一个无效的相对引用。答案已相应更新。
Javascript: URI 是否有效？像这样：stackoverflow.com/q/1689215/328397
附带说明，如果您使用# 作为您的 src 值，Chrome 会将页面“跳转”到 iframe。想象一下，如果您的 iframe 正上方有一个锚标记 <a name="anchor"></a>。 Chrome 的行为就像您的 URL 是 mypage.html#anchor。
“如果存在”表明您也可以完全省略 src 属性（<iframe></iframe> 没有 src=）。

【解决方案5】：

你可以尝试通过 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。

【讨论】：

【解决方案6】：

看起来你也可以完全省略 src：

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

如果在创建元素时，srcdoc 属性是未设置，并且 src 属性是 也未设置 或已设置但其值不能被解决，浏览上下文将保持在初始状态 about:空白页。

【讨论】：

在 Chrome 中可能会遇到一个烦恼，如果您重新加载父页面，src="" 将导致先前加载的页面重新加载，这可能不是您想要的。 about:blank 可能是更好的选择。

【解决方案7】：

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

about:blank 返回具有媒体类型的空白 HTML 文档 text/html 和字符编码 UTF-8。这被广泛用于加载将空白页面放入浏览上下文中，例如 HTML 中的 iframe，其中然后可以通过脚本进行修改。 You can see further here

【讨论】：

【解决方案8】：

记录在案

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

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

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

改为：

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

一切正常，css加载完毕，iframe终于加载完毕。

【讨论】：

【解决方案9】：

如果您不想使用 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 example

【讨论】：

【解决方案10】：

如果你用
javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(VARİABLES,,true,,false,) 调用你的 iframe 在服务器端你可以再次拥有一个 src=""

【讨论】：