这是iframe的标准代码,有没有办法将src URL仅替换为html代码?所以我的问题很简单,我有一个页面,它从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美元.


编辑:另一种 Select 是使用Javascript执行此操作.这几乎肯定是我会 Select 的技术.您不能保证浏览器会接受多长时间的数据URL.Javascript技术如下所示:

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

iframedoc.body.innerHTML = 'Hello world';

Example


Edit 2 (December 2017):使用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相关问答推荐

Angular html模板中的jis

打印pdf时100 vh迪夫有半页高

背景可点击,而不是文本

在WooCommerce单一产品页面上使产品图片库粘滞(固定)

如何用css在右侧创建多个半圆

元素在向x提供溢出时被隐藏

如何使VS代码支持以模仿嵌套的方式对已经包含注释的HTML进行注释?

我的 *ngFor 中的 array.reverse() 在生产中不起作用

如何为高度较小的块制作边框动画?

MUI 日期 Select 器要包含的日期

如何将一个边框向下移动

BeautifulSoup用名称列表的findall无法找到另一个目标后面的目标

不完整的悬停

视频添加到 Html 与 Github 不同步

css 网格创建空行和列

右对齐 bootstrap 导航项而不是下拉菜单

防止 HTML 表格在 Quarto 中使用全页宽度

如何在react 中向按钮添加禁用属性?

如何自定义具有白色透明背景的光标图像?

focusout() Select 器不适用于搜索框