jQuery append与<script>标记</script>无法完全兼容

Question

使用jquery添加脚本元素而不是手动将其放在html中似乎会导致非常不同的结果。例如

snaphtml = '<script src="http:\/\/seadragon.com\/embed\/lxe.js?width=auto&height=400px"><\/script>';
$('#content').append(snaphtml);

破坏了我的页面布局，但是将脚本元素直接放在页面中可以正常工作。

我在网上发布了一个测试用例：

• Working example with script in html.
• Broken example with script appended via jquery.

添加silverlight对象后，不应删除/隐藏第二个div。

想法？

Answer 1

我建议您使用$.getScript方法以编程方式加载外部脚本文件：

$.getScript('path/to/script.js', function() {
  alert('Script loaded.');
});

脚本加载是异步进行的，正如您在上面的示例中所看到的，您可以指定一个回调函数，该函数将在您的外部文件加载并准备好使用时执行。

Answer 2

Tristan，您将无法在加载完成后将您动态引用的脚本包含在页面中。外部脚本使用document.write，只有在页面加载完成之前调用时才能正常工作。这就是为什么你的静态实现工作正常，你的动态撕裂页面分开。

您可能希望将一个只有基本HTML结构的虚拟HTML文件放在一起，并且已经包含此脚本。然后动态地将iframe添加到加载HTML的页面。有更多动态方法可以让它与iframe一起使用，但这将是最简单的。

Answer 3

尝试使用$.getScript：

$.getScript("http://seadragon.com/embed/lxe.js?width=auto&height=400px");

编辑： 提供的脚本使用document.write，这可能会导致您的问题：您无法在页面中间动态添加它。尝试加载SeaDragon，如下所示：
http://www.seadragon.com/developer/ajax/getting-started/

Answer 4

尝试破坏脚本标签 snaphtml ='＆lt; / sc'+'ript＆gt;'