当前位置：文江博客话题详情

空的 iframe src 有效吗？

发布于 2024-11-06 06:48:48 字数 176 浏览 1 评论 0原文

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

有效还是我需要使用其他类似 javascript:; 等

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

屌丝范 2024-11-13 06:48:48

只是

回复收藏 0 原文

孤芳又自赏 2024-11-13 06:48:48

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

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

根据 RFC 3986，有效的 URL 必须以方案名称，以及相对引用不能仅存在于片段中。

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

使用 about:blank反而。

回复收藏 0 原文

审判长 2024-11-13 06:48:48

不，指定空 iframe src无效。

您应该使用。

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

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

2012 年 6 月 8 日更新：

看来 'living' 规范不再使 iframe 无效：

如果在创建元素时未设置 srcdoc 属性，并且
src 属性要么也未设置，要么设置但其值不能
解决后，浏览上下文将保持在初始状态
关于：空白页。

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

回复收藏 0 原文

无远思近则忧 2024-11-13 06:48:48

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

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

如果在创建元素时，srcdoc 属性未设置，并且
src 属性要么也未设置，要么设置但其值不能
解决后，浏览上下文将保持在初始状态
关于：空白页。

回复收藏 0 原文

夕嗳→ 2024-11-13 06:48:48

如果您不想使用 about:blank，您可以使用 javascript 作为 iframe 的 src，如下例所示

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

：将初始化一个具有栗色背景的 iframe，其中包含一条简单的消息

结果窗口

。但是，链接的目标应等于 iframe name 属性，即该示例中的 TV。

注意：

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

Jsbin 示例

If you don't want to use about:blank you may use javascript as an src for your iframe like the following example:

<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 iframe with maroon background that has a simple message <h3>Results Window</h3>. However, the targets of your links should equals the iframe name attribute i.e in that example 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.com or google.com, for example, and checkout your browser's console.

Jsbin example

回复收藏 0 原文

混浊又暗下来 2024-11-13 06:48:48

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

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

回复收藏 0 原文

独留℉清风醉 2024-11-13 06:48:48

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

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

(jQuery example)

<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.

回复收藏 0 原文

兔姬 2024-11-13 06:48:48

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

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

回复收藏 0 原文

岁月苍老的讽刺 2024-11-13 06:48:48

为了记录，

让我们说下一个例子（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 最终已加载。

For the record

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

<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.

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.

回复收藏 0 原文

晨光如昨 2024-11-13 06:48:48

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

回复收藏 0 原文

没企图 2024-11-13 06:48:48

原始 HTML 和 JavaScript 示例。

当某些事件发生时，您可以加载 iframe。只要您有一个 HTML 元素准备好接受 iframe。

下面，仅当单击该段落元素时才会出现 iframe。因此从技术上讲，在单击发生之前它将是空白的。

HTML

<body>
<p id=iFrameParagraph></p>
</body>

JavaScript

var pFrame = document.getElementById("iFrameParagraph"); //iframe paragraph

pFrame.addEventListener('click' ,function() {
    pFrame.innerHTML="<iframe src=\"./path/to/file\" frameborder=\"0\" height=\"400\" width=\"95%\"></iframe>"; 
});

Raw HTML and JavaScript example.

You could just load in your iframe when some event happens. As long as you have a HTML element ready to accept an iframe.

Below, an iframe will appear only if this paragraph element is clicked. So technically it will be blank until a click happens.

HTML

<body>
<p id=iFrameParagraph></p>
</body>

JavaScript

var pFrame = document.getElementById("iFrameParagraph"); //iframe paragraph

pFrame.addEventListener('click' ,function() {
    pFrame.innerHTML="<iframe src=\"./path/to/file\" frameborder=\"0\" height=\"400\" width=\"95%\"></iframe>"; 
});

回复收藏 0 原文

~没有更多了~