如何在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标签中追加元素?的主要内容,如果未能解决你的问题,请参考以下文章

如何使iframe中的链接都在新窗口打开?

ie 下面 js动态设置 iframe src 不显示,一片空白

javascript 控制 iframe 里面的 a 元素让它不跳出iframe

jQuery操作iframe子页中元素代码实例

如何使用 document.getElementById 在 iframe 中选择元素

iframe 怎么继承父页面的 css 和 js