iframe没有src但仍有内容？

Question

在他们的网站上调试jquery代码时(通过chrome开发人员工具栏)

我注意到他们的例子是在下面给出的Iframe:

这里 - 例如,有一个样本位于Iframe下,但在调查之后,我看到Iframe没有SRC

图为这一切

在此输入图像描述

题 :

是否可以在不设置其SRC的情况下将内容设置为Iframe？

ps这个菜单还显示了一个空内容

在此输入图像描述

Answer 1

是的,可以加载空<iframe>(没有src指定),然后使用脚本将内容应用于它.

或者只是尝试:

<iframe></iframe>

document.querySelector('iframe')
        .contentDocument.write("<h1>Injected from parent frame</h1>")

@OZZIE codepen.io 使用它让用户编写在 iframe 中执行的 CSS 和 JS 代码，然后用户可以只编写 CSS 代码而无需内联它。 (2认同)

Answer 2

看起来这是跨浏览器最兼容的解决方案，并且得到了W3C的认可

<iframe src="about:blank"></iframe>

Answer 3

其中的属性srcdoc允许iframe直接设置 HTML 内容：

<iframe srcdoc="<p>Hello world!</p>" src="demo_iframe_srcdoc.htm"></iframe>

src用于备份，以防浏览器不支持srcdoc。

Answer 4

是的,以下是使用jQuery更改iframe的html的方法

var context = $('iframe')[0].contentWindow.document,
    $body = $('body', context);
$body.html('Cool');