代码之家 › 专栏 › 技术社区 › Craig McQueen

将文档字符串加载到iframe中

iframe ajax html jquery javascript

Craig McQueen · 技术社区 · 17 年前

我有一个字符串(通过ajax获取),它是一个完整的html文档(doctype to</html>)。有人知道如何将其加载到iframe中吗?

我不能简单地在iframe的src中指定返回文档的url,因为响应可能来自帖子,重复它可能会产生不良影响。此外,我不能第一次将其提交到iframe,因为我不能绝对预测结果将是一个文档而不是一些json。基本上,我记不起url,我必须能够使用我的版本(字符串)。

jQuery是公平的游戏,因为这就是我使用的。

1 回复 | 直到 17 年前

LarsW 9 年前

你可以使用 data URI .数据URI是一种加载内联数据的方式,就像加载外部数据一样。它们看起来像这样: data:<mimetype>,<data> .对于HTML,mimetype是 text/html ,在你的例子中,数据是这样的: <!DOCTYPE><html><head><title>Iframe</title></head><body>Hi!</body></html> .如果我们将其放入数据URI中,我们会得到如下结果:

data:text/html,<!DOCTYPE><html><head><title>Iframe</title></head><body>Hi!</body></html>

当我们把它设为 src 关于 iframe ,看起来像这样。

var string = '<!DOCTYPE><html><head><title>Iframe</title></head><body>Hi!</body></html>',
  iframe = $('#iframe')

iframe.attr('src', 'data:text/html,' + string)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="iframe" src=""></iframe>

rtO 5 年前

@LarsW one不需要使用jQuery。例如,如果html字符串是驻留在文件系统中的文件,但无法从www访问(或者必须用PHP构建),则可以使用以下PHP代码

$htmlText = "data:text/html;base64,".base64_encode(file_get_contents("someFolder/file.html"));
echo "<iframe src='$htmlText'></iframe>";

我在没有base64扩展名的情况下遇到问题,因为文件中有引号。html可以破坏html代码。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前