Html 代码作为 IFRAME 源而不是 URL

标签 html iframe frame

这个 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>   

最佳答案

您可以使用数据 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属性。 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>

关于Html 代码作为 IFRAME 源而不是 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6102636/

相关文章:

html - 为什么这个高度为 100vh 的 div 没有覆盖整个视口(viewport)?

c# - IFRAME 中的 Internet Explorer 和客户端证书

javascript - Docusign 登录过程完成后如何重定向出 Iframe

java - 如何在另一个面板中显示一个面板?

javascript - 使用 Jquery Ajax PHP 提交表单

jquery - 使用此代码单击时我无法更改类背景颜色。为什么?

jquery - iphone/css - 单击时如何防止黑色半透明覆盖在项目上

javascript - 了解 Iframe 中的跨域问题

java - 小程序 isShowing() 与框架 isShowing()

c# - 如何在框架中拆分 .gif?