如何在iframe的head标签中追加元素?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在iframe的head标签中追加元素?相关的知识,希望对你有一定的参考价值。
1)我想动态创建一个iframe。
2)我已经模拟了head和body标签的数据(字符串模板)。
3)我想用2)中的给定数据创建iframe
码
var bodyhtml = '<p>Content</p>';
var headHtml = '<title>Title</title>';
var iframe = document.createElement('iframe');
// inject the bodyHTML to locally iframe
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(bodyHtml );
// headHtml how ?
// inject my iframe in the DOM
$('mySelector').append(iframe);
如何在iframe头标记中注入headHtml?
答案
你已经完成了大部分工作。文档的内容不仅仅是正文,而是整个内容,所以你构建整个东西,然后将其传递给encodeURIComponent
(而不是encodeURI
):
var bodyHtml = '<p>Content</p>';
var headHtml = '<title>Title</title>';
var iframe = document.createElement('iframe');
// inject the bodyHTML to locally iframe
iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(
"<!doctype html>" +
"<html>" +
"<head>" + headHtml + "</head>" +
"<body>" + bodyHtml + "</body>" +
"</html>"
);
// inject my iframe in the DOM
$('body').append(iframe);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
以上是关于如何在iframe的head标签中追加元素?的主要内容,如果未能解决你的问题,请参考以下文章
ie 下面 js动态设置 iframe src 不显示,一片空白
javascript 控制 iframe 里面的 a 元素让它不跳出iframe