【问题标题】：document.write with CoffeeScript使用 CoffeeScript 编写文档
【发布时间】：2011-07-01 13:38:33
【问题描述】：

我知道我可能做错了，因为如果通过 try coffeescript feature 尝试这样做，它可以工作，但令人惊讶的是它在我的示例中没有发出任何结果：

<!--http://f.cl.ly/items/1u3Q3W101U2T18162v0V/test.html-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
</head>
<body>
  <script type="text/coffeescript" >
    document.write "<h2>TEST</h2>"
  </script>
</body>
</html>

document.write 方法似乎没有向正文输出任何内容，在这种情况下，console.log 可以正常工作，但document.write 却不行

即使在尝试使用 onload 处理程序（就像我在 javascript 中使用的那样）运行脚本之后

var loaded = function(){
  alert("hello");
}

document.addEventListener('DOMContentLoaded', loaded);

然后在咖啡脚本中作为

loaded = ->
   alert "hello"

document.addEventListener "DOMContentLoaded", loaded

与 javascript 版本相比，似乎没有触发事件方法

谁能帮我看看发生了什么？

谢谢

更新

如果在页面加载后运行控制台，我可以毫无问题地执行以下操作：

CoffeeScript.eval('document.write "<h1>testing</h1>"')

但仍然想知道为什么页面本身没有自动显示

适用于 Firefox 和 Chrome，但不适用于 Safari

如果使用 Safari 5.0.3，页面似乎没有显示

【问题讨论】：

抱歉我的虚假回答，@ludicco - 我想我今天有点慢 :-)
@kjy112 真的吗？这很奇怪......我真的很困惑：/
哇，这很奇怪，我刚刚将上面的代码上传到云中，它在f.cl.ly/items/1u3Q3W101U2T18162v0V/test.html 上运行，所以我想你们应该也可以运行吧？您能否确认此网址是否也在屏幕上显示 TEST 标头？
谢谢大家，我刚刚注意到它适用于 Firefox，但不适用于我的 Safari 5.0.3

标签： javascript html coffeescript document.write

【解决方案1】：

我对 CoffeeScript 一无所知，但不要使用 document.write。这是邪恶的：http://javascript.crockford.com/script.html

改用 createElement 和 appendChild/insertBefore：

var p = document.createElement("p");
p.innerHTML = "Lolz";
document.body.appendChild(p);

myDiv = document.getElementById("aDiv");
document.body.insertBefore(p, myDiv);

document.write 在 Safari 中也有问题。

【讨论】：

【解决方案2】：

这是一个humdinger，但经过调查，我得到了你的答案：

coffee-script.js 的工作方式是在文档加载后查找并运行带有type="text/coffeescript" 的脚本。对于 Safari，这意味着

<script type="text/coffeescript">
  document.write "<h2>TEST</h2>"
</script>

等价于

<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', function() {
    document.write("<h2>TEST</h2>");
  }, false);
</script>

默默地失败了。请注意，使用 Erlend 描述的 document.createElement 方法或 jQuery 之类的库进行插入将可以正常工作。

由于这在 Chrome 中有效，我会继续称其为 Safari 错误。但这个故事的真正寓意是：不要使用 document.write。

【讨论】：

Trevor 非常感谢您的解释，很高兴知道那里发生了什么。 :)