如何在iframe中显示渲染的Handlebars模板

How to display a rendered Handlebars template in an iframe

本文关键字：Handlebars 模板 显示 iframe      更新时间：2023-09-26

由于各种原因（孤立的css、易于加载资产等），我想在iframe中显示一个渲染的Handlebars模板。我该怎么做？

我试过以下几种：

  1. 将设置了src的iframe元素附加到Handlebars文档中，然后使用jQuery/Handebars获取body的内容，对其进行编译，并将其放回iframe中。

    • 这里的问题是DOM与静态.hbs文件不同，我更喜欢使用原始hbs文件。例如，可以注入一些脚本，这往往会把事情搞砸

  2. 将src设置为about:blank的iframe元素追加，对Handlebars文档发出ajax请求，对其进行编译，然后将其追加到iframe的正文中。

    • 这里的问题是，资产在从服务器获取资源时使用iframe的src属性，并且由于未设置该属性，因此无法定位资源。如果在执行此步骤后更改src，则会重新加载整个iframe

这篇关于斑点/斑点的文章可能会帮助您：https://developer.mozilla.org/en-US/docs/Web/API/Blob

这基本上就是它的工作方式：

var iframe = document.getElementById('myframe');
// Create a new Blob using your data and handlebars template
var blob = new Blob(['<div>Hello World</div>'], {type : 'text/html'});
// create a URL from your new blob
var url = URL.createObjectURL(blob);
// Set your iframe to show the Bloburl
iframe.src = url;

（http://jsfiddle.net/83PQs/）

支持Chrome、SF、FF和IE10(http://caniuse.com/#feat=bloburls)。

相关文章：