Firefox中$('script#id').html()获取Handlebar模板返回空值问题

我之前也碰到过一模一样的问题！Firefox和Chrome对非标准type属性的script标签处理逻辑不一样，这才导致了你看到的差异：

问题原因 #

当script标签的type不是text/javascript这类浏览器默认解析的类型时（比如你的text/x-handlebars-template）：

• Chrome会把标签内的内容当作HTML内容处理，所以$('script#myId').html()能拿到模板代码；
• Firefox则会将其视为纯文本节点，不会解析为HTML子元素，因此html()方法返回空值，而text()方法可以正确获取到原始的文本内容。

解决方案 #

其实你不用纠结“需要HTML格式内容”这个点——text()拿到的字符串本身就是完整的Handlebars模板代码，直接传给Handlebars编译就可以生成正常的HTML，效果和Chrome里用html()完全一致。

修改你的代码试试：

// 获取模板文本内容
const templateSource = $('script#myId').text();
// 编译模板
const template = Handlebars.compile(templateSource);
// 渲染（这里假设你有需要传入的数据，没有的话传空对象即可）
const renderedHtml = template({});
// 插入到页面
$('#result').html(renderedHtml);

如果你更倾向于原生JS的方式，也可以直接获取DOM元素的textContent属性，效果相同：

const templateSource = document.querySelector('#myId').textContent;

验证说明 #

你之前用text()拿到的<div>My HTML content</div>字符串，并不是“纯文本”意义上的内容，它就是你的模板原始代码。Handlebars编译时会正确识别其中的HTML结构，最终渲染出来的就是正常的HTML元素，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Mayank