1

我有各种各样的backbone.js CMS，它接受html，然后在浏览器中呈现它。以下是呈现主干页面对象的模板文件（在 .hamlc 中）。

%h1.text= @page.get('title')
.text.page-content!= @page.get('content')

这工作正常，直到我有一个<script>标签。我有一个小部件的脚本标签（下）

<script src='http://www.opentable.com/frontdoor/default.aspx?rid=52900&restref=52900&bgcolor=8AA86B&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=http://www.opentable.com/frontdoor/img/ot_btn_black.png&otlink=FFFFFF&icon=light&mode=short&hover=1'></script>

这个小部件使用document.write（如果您查看源代码，您可以看到）。首先，当我加载页面时它不显示任何内容（我已经在一个 html 文件中单独测试了这个小部件，它显示了它们正常的 God-awful ）。当我检查元素时，看起来脚本标签已被删除。

但是，当我使用以下内容进行测试时：

<script type="text/javascript">
    alert(0);
</script>

它运行。尽管如此，检查员仍然什么都没有。

最后，使用以下内容进行测试：

<script type="text/javascript">
    document.write('test');
</script>

它也运行。但是，它完全破坏了页面内容，只显示“测试”。

根据这篇关于使用 document.write for widgets 的文章，它说它在页面加载后无法运行。我假设这里发生的事情是 document.write 在页面加载后运行并销毁所有内容，因为这是主干.js 使用的技术（加载/替换页面加载后的 DOM 中的元素）。

如何使我的 Backbone.js CMS 接受带有 document.write 小部件的脚本标签，而不显示任何内容或破坏整个页面？

4

3 回答 3

2

我无法重现它，模板按应有的方式呈现：

$ coffee
coffee> hc = require './src/hamlc'
{ compile: [Function],
  template: [Function],
  __express: [Function] }
coffee> template = hc.compile ".text.page-content!= @content"
[Function]
coffee> template(content: 'Hello <script>Script</script>')
'<div class=\'page-content text\'>Hello <script>Script</script></div>'

并且脚本标签被保留。你有安装最新版本吗？

于 2013-06-18T06:48:37.697 回答
1

如果我理解正确，您正在尝试将小部件的脚本标签包含在模板中，这意味着它是在初始 DOM 准备好之后插入的。由于您提到的原因，这不起作用；当脚本执行时，它将替换 DOM 中的所有内容。

您需要在初始 DOM 完成之前加载脚本，即在 < head> 或 < > 的开头body。这反过来意味着您必须在服务器交付的初始 HTML 中包含脚本标记，而不是尝试在客户端动态生成它。

于 2013-06-29T07:53:56.713 回答
1

您在页面加载后调用 document.write，因此它将覆盖整个页面。您可以尝试将脚本标签放在 iframe 中，或猴子补丁 document.write 以在页面加载后表现不同。请参阅此问题的最佳答案：

动态添加的 JavaScript 覆盖 html 页面视图（不是代码）

于 2013-07-01T15:53:03.553 回答