javascript - document.write 有哪些替代方案？

Question

我正在尝试动态加载zoom.it脚本，但如果没有document.write. 问题document.write在于它替换了我页面上的所有内容，这是我不想要的。还有哪些其他选择？

这是document.write在行动： http: //jsfiddle.net/JyT9B/6/（注意被删除的元素）。

此外，将<script>标签直接放入正文中是有效的：http: //jsfiddle.net/gTcRw/5/，但我需要动态放置它。

我还尝试了如何在页面中动态添加 javascript 文件和如何动态添加和删除 js 文件中的方法，但似乎得到了错误Cannot set property 'innerHTML' of null，这可能是 zoom.it 特定的东西。我不介意知道为什么会这样。

使用其他方法的 jsfiddle 示例：

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

score 2 · Accepted Answer

我认为createElementand的组合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- 只需将 theurl作为第一个参数传递，例如：

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

score 1 · Accepted Answer

最终使用 iframe 来包含一个带有嵌入脚本标签的 html 页面。

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

IE，

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/

javascript - document.write 有哪些替代方案？

2 回答 2

Related

Reference