如何在iframe的head标签中追加元素？

问题描述 投票：0回答：1

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？

javascript jquery html iframe
1个回答
2
投票

你已经完成了大部分工作。文档的内容不仅仅是正文，而是整个内容，所以你构建整个东西，然后将其传递给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>

或者使用ES2015 +语法（特别是模板文字）：

// 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>
`);

实例：

const bodyHtml = '<p>Content</p>';
const headHtml = '<title>Title</title>';

const 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.