logo标签列表

作为IFRAME源的HTML代码而非URL

htmliframeframe
189

这是一种IFRAME的标准代码，有没有办法用纯HTML代码替换src URL？我的问题很简单，我有一个页面，它从MYSQL加载HTML正文，我想在一个框架中呈现该代码，以便它独立于页面的其余部分呈现，并在特定边界范围内呈现。

<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>
5个回答
231

你可以使用数据URL来实现这个目的。它会将整个文档包含在一个HTML字符串中。例如，下面是一个HTML示例：

<html><body>foo</body></html>

可以用以下方式进行编码：

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E
并将其设置为 iframe 的 src 属性。 示例。

编辑：另一种选择是使用 JavaScript 完成此操作。这几乎肯定是我会选择的技术。您无法保证浏览器接受多长时间的数据 URL。JavaScript 技术看起来会像这样：

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

示例

Edit 2 (2017年12月)：使用Html5的srcdoc属性，就像Saurabh Chandra Patel的答案中所示，他现在应该是被采纳的答案！如果你能有效地检测IE / Edge，一个提示是只针对它们使用srcdoc-polyfill库，而在所有非IE / Edge浏览器中使用“纯”srcdoc属性（确保查看caniuse.com）。

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
5
IE8支持吗？数据URI不能在IE8中表示HTML文件。 - franzlorenzon
2
这里有没有一种方法可以提供跨域头？Chrome始终在抱怨“已阻止具有http://localhost来源的帧访问跨域帧”。 - jozxyqk
1
@AndrewSwan 我不太明白单引号的问题。你能给我一个例子吗？ - Septagram
5
对于像我这样想要使用PHP编码HTML的人，您需要使用rawurlencode（http://php.net/manual/en/function.rawurlencode.php）。 - Braiba
4
请注意，如果您使用 innerHTML ，浏览器将不会执行后代脚本标记。如需更多信息，请查看 Element.innerHTML MDN 页面的 安全注意事项 部分。 - Leonid Vasilev
显示剩余7条评论
158

使用 html5 的新属性 srcdoc (srcdoc-polyfill) 文档

<iframe 
    srcdoc="<html>
              <body>Hello, <b>world</b>.</body>
           </html>">
</iframe>

浏览器支持 - 在以下浏览器中进行了测试：

Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50

如果你的 HTML 包含双引号, 考虑 转义它的双引号

<iframe 
    srcdoc="<html>
              <body>&quot;Hello&quot;</body>
           </html>">
</iframe>

或使用JavaScript动态设置srcdoc属性

iframe.srcdoc = '<html>
                  <body>"Hello"</body>
               </html>';

在尝试使用Javascript操作iframe的内容之前（添加事件侦听器等），请记得等待iframe的onload事件。

1
谢谢！我需要一个现代的 WebKit WebView 的解决方案，这绝对是最简单的方法！ - Antoine
1
不支持IE浏览器。 - dude
1
CanIUse.com显示支持相当差：http://caniuse.com/#search=srcdoc - msquitieri
5
不，它说的是本地支持不好，而不是polyfill的支持不好。 - Walf
2
但是一旦你开始使用引号，这个就会出问题。 - Agil
显示剩余3条评论
24
根据W3Schools的说法，HTML 5允许您使用新的“srcdoc”属性来实现此功能，但浏览器支持似乎非常有限。
5
还有一个srcdoc的Polyfill。 - Uwe Keim
2
@UweKeim 感谢您建议使用 polyfill。它很轻量级且运行良好。 - The Muffin Man
1
根据caniuse.com的数据，只有臭名昭著的微软IE和Edge浏览器（除了Opera Mini）不支持srcdoc属性，因此它并非“非常有限”。对于使用Microsoft用户，只需使用srcdoc-polyfill即可。 - Heitor
4
我有一个页面，它从MYSQL加载HTML正文。我想将该代码呈现在一个框架中，以便独立于页面的其他部分呈现，并且在特定边界的限制内自我渲染。
如果只需加载一部分数据文本，则带有未编码数据URI的object也可能符合您的需求：
HTML <object> 元素表示一个外部资源，可以被视为图像、嵌套的浏览上下文或由插件处理的资源。

https://codepen.io/gc-nomade/pen/bGKQVRr or snippet below 

body {display:flex;min-height:25em;}
p {margin:auto;}
object {margin:0 auto;background:lightgray;}
<p>here My uploaded content: </p>
<object data='data:text/html,
  <style>

.table {
  display: table;
  text-align:center;
  width:100%;
  height:100%;
}

.table > * {
  display: table-row;
}

.table > main {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
</style>


<div class="table">
  <header>
    <h1>Title</h1>
    <p>subTitle</p>
  </header>

  <main>
    <p>Collection</p>
    <p>Version</p>
    <p>Id</p>
  </main>

  <footer>
    <p>Edition</p>
  </footer>'>

</object>

但如果您坚持使用Iframe的想法，您也可以将HTML加载到Iframe标记中，并将其设置为srcdoc值。您不必担心引号或将其转换为数据URI，只需注意在加载完成后触发onload事件。

HTML内联框架元素（<iframe>）表示嵌套浏览上下文，将另一个HTML页面嵌入当前页面中。

以下两个iframe将呈现相同的内容，其中一个需要额外的javascript。

示例：https://codepen.io/gc-nomade/pen/JjZeYyg 或以下片段

body {
  display: flex;
  min-height: 25em;
}

p {
  margin: auto;
}

iframe {
  margin: 0 auto;
  min-height: 100%;
  background:lightgray;
}
<p>here my uploaded contents =>:</p>
  <iframe srcdoc='<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
html, body {
  height: 100%;
  margin:0;
}

body.table {
  display: table;
  text-align:center;
  width:100%;
}

.table > * {
  display: table-row;
}

.table > main {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
</style>
</head>

<body class="table">
  <header>
    <h1>title</h1>
    <p>injected via <code>srcdoc</code></p>
  </header>

  <main>
    <p>Collection</p>
    <p>Version</p>
    <p>Id</p>
  </main>

  <footer>
    <p>Edition</p>
  </footer>
</body>
</html>'>

</iframe>

  <iframe onload="this.setAttribute('srcdoc', this.innerHTML);this.setAttribute('onload','')">
    <!-- below html loaded -->
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
      <title>Test</title>
      <style>
        html,
        body {
          height: 100%;
          margin: 0;
          overflow:auto;
        }
        
        body.table {
          display: table;
          text-align: center;
          width: 100%;
        }
        
        .table>* {
          display: table-row;
        }
        
        .table>main {
          display: table-cell;
          height: 100%;
          vertical-align: middle;
        }
      </style>
    </head>

    <body class="table">
      <header>
        <h1>Title</h1>
        <p>Injected from <code>innerHTML</code></p>
      </header>

      <main>
        <p>Collection</p>
        <p>Version</p>
        <p>Id</p>
      </main>

      <footer>
        <p>Edition</p>
      </footer>
    </body>

    </html>
    </iframe>

你能否在CodePen上展示一下你的代码示例？因为你的第二个示例在我的电脑上无法正常渲染iframe，谢谢。 - OJB1
@OJB1 这里是带有iframes的codepen代码：https://codepen.io/gc-nomade/pen/JjZeYyg 和带有object的代码：https://codepen.io/gc-nomade/pen/bGKQVRr - G-Cyrillus
4

iframe srcdoc：该属性包含HTML内容，将覆盖src属性。如果浏览器不支持srcdoc属性，则会回退到src属性中的URL。

让我们通过一个例子来理解它。

<iframe 
    name="my_iframe" 
    srcdoc="<h1 style='text-align:center; color:#9600fa'>Welcome to iframes</h1>"
    src="https://www.birthdaycalculatorbydate.com/"
    width="500px"
    height="200px"
></iframe>

原始内容来自 iframe 。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接