Question

这个IFRAME的标准代码，有没有办法用Just 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>

Answer 1

您可以使用数据网址执行此操作。这包括整个文档在单个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属性。 Example

编辑：另一种方法是使用Javascript执行此操作。这几乎可以肯定是我选择的技术。您无法保证浏览器接受的数据URL有多长。 Javascript技术看起来像这样：

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

iframedoc.body.innerHTML = 'Hello world';

Example

编辑2（2017年12月）：使用Html5的 srcdoc 属性，就像在 Saurabh Chandra Patel 的回答中一样，谁现在应该是接受的答案！如果你可以detect IE/Edge efficiently，建议只为他们使用srcdoc-polyfill库，并在所有非IE / Edge浏览器中使用“纯”srcdoc属性（检查caniuse.com以确定）。

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

Answer 2

使用html5 srcdoc-polyfill Docs

<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

Answer 3

根据W3Schools，HTML 5允许您使用new "srcdoc" attribute执行此操作，但浏览器支持似乎非常有限。

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

原始内容取自iframes。

Answer 5

<块引用>

我有一个页面，它从 MYSQL 加载 HTML 正文，我想在框架中显示该代码，以便它独立于页面的其余部分并在该特定边框的范围内呈现它自己。

如果只是加载一部分数据文本，则带有未编码 dataUri 的 object 也可能满足您的需求：

<块引用>

HTML <object> 元素表示外部资源，可以将其视为图像、嵌套浏览上下文或由插件处理的资源。

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 想法，您也可以在 iframe 标记中加载您的 HTML 并将其设置为 srcdoc 值。您不必介意引号或将其转换为 dataUri，而只需介意触发 onload 一次。< /p> <块引用>

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

下面的两个 iframe 将呈现相同的效果，一个需要额外的 javascript。

加载完整文档的示例：

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>

Html代码作为IFRAME源而不是URL

5 个答案: