Question

我正在尝试动态加载zoom.it脚本，但如果没有document.write我似乎无法这样做。 document.write的问题在于它取代了我不想要的页面上的所有内容。还有什么其他选择？

这是document.write实际操作：http://jsfiddle.net/JyT9B/6/（注意要删除的元素）。

此外，将<script>标记直接放入正文：http://jsfiddle.net/gTcRw/5/，但我需要将其动态放置。

我也尝试了Ways to add javascript files dynamically in a page和How to add and remove js files dynamically中的方法，但似乎得到了错误Cannot set property 'innerHTML' of null，这可能是zoom.it特定的东西。我不介意知道为什么会这样。

使用其他方法的jsfiddle示例：

也是徒劳地尝试了这个：.innerHTML - 它被添加到dom但是没有运行。

Answer 1

我认为createElement和appendChild的组合应该有效，如下所示：

http://jsfiddle.net/kbDny/3/

$(function() {
    getScript("http://www.zoom.it/aaa.js");
});

function getScript(src) {
    var scr = document.createElement("script");
    scr.type = "text/javascript";
    scr.src = src;

    var head = document.getElementsByTagName("head")[0];
    head.appendChild(scr);
}

但是没有理由不使用$.getScript - 只需传递url作为第一个参数，例如：

$.getScript(url, function (data, textStatus, jqxhr) {
    // Script loaded successfully
});

Answer 2

使用iframe结束包含带有嵌入式脚本标记的html页面。

iframe的好处是我可以随意显示/删除它，而不必担心在删除脚本时清理当前页面文档。

即

HTML

<body>
  <div id="container">
    <a id="show" href="#">show</a>
    <a id="close" href="#">close</a>

    <div id="placeholder"></div>
  </div>
</body>

的JavaScript

function appendFrame(elem) {
  var iframe = document.createElement("iframe");
  iframe.id = "iframe";
  iframe.setAttribute("src", "about:blank");
  iframe.style.width = "200px";
  iframe.style.height = "200px";
  $(elem).append(iframe);
}

function loadIFrame() {
  appendFrame($("#placeholder"));

  var doc = document.getElementById('iframe').contentWindow.document;
  doc.open();
  doc.write("<html><head><title></title></head><body><script src='http://zoom.it/aaa.js'><\/script><\/body><\/html>");
  doc.close();
};

$("#show").click(function() {
  loadIFrame();
});

$("#close").click(function() {
  $("#iframe").remove();
});

JSFiddle解决方案：http://jsfiddle.net/7KRcG/2/

document.write有哪些替代方案？

2 个答案: