Question

编织：here

我正在构建移动设备的代码游乐场，今天玩游戏时我注意到了一个问题。

每当更改文本框时都会调用updatePreview()函数并更新预览，以便人们可以在编写代码时查看其应用的外观。

function updatePreview() {
  var previewFrame = document.getElementById("preview")
  var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document
  preview.open()
  preview.write("<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>Document</title><style>" + cssEditor.value + "</style></head><body>"+ htmlEditor.value + "<scr" + "ipt>" + jsEditor.value + "</scr" + "ipt></body></html>")
  preview.close()
}
updatePreview()

然而，当我将以下setInterval函数添加到javascript部分并进行更改时。不是每隔一秒调用一次setInterval，而是一直调用它，以更快的间隔运行，增加前一个间隔。

var newGradient = function() {
  var randomColor1 = '#' + Math.floor(Math.random() * 16777215).toString(16),
    randomColor2 = '#' + Math.floor(Math.random() * 16777215).toString(16);
    return 'radial-gradient(at top left, ' + randomColor1 + ', ' + randomColor2 + ')';
  };

  setInterval((function() {
    return $('body').css('background', newGradient())
  }), 1000)

这里的问题在于我的updatePreview()功能。

我已经尝试preview.location.reload()。

我想也许可以使用setTimeout和clearTimeout来运行并停止它可以解决问题的功能......

var runPreview = setTimeout(function() {
      updatePreview()
    }, 300);
setTimeout(function() {
  updatePreview()
}, 300)

jsEditor.addEventListener("keyup", function() {
  clearTimeout(runPreview)
  setTimeout(function() {
    updatePreview()
  }, 300)
})

显然这不起作用。有谁知道解决这个问题的方法？

Answer 1

编织：http://kodeweave.sourceforge.net/editor/#b6b39c95ec91f42950957a1ac8dc707f

我设法找出一种（相当粗略的）解决这个问题的方法。我将iframe附加到容器中，并以这种方式应用脚本。每当有更改时，旧iframe将被删除，并添加新的iframe。

document.querySelector(".preview").innerHTML = ""
var frame = document.createElement("iframe")
frame.setAttribute("id", "preview")
frame.setAttribute("sandbox", "allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts")
document.querySelector(".preview").appendChild(frame)

iFrame在超时时停止执行

1 个答案: