将 javascript 个生成的帧转换为 div

Question

我有一些旧代码正在尝试转换为 divs。它包含没有目标 src 的框架，只是 JavaScript 生成一个页面。

下面是代码...

var editboxHTML =
  '<html class="expand close">' +
  '<head>' +
  '<style type="text/css">' +
  '.expand { width: 100%; height: 100%; }' +
  '.close { border: none; margin: 0px; padding: 0px; }' +
  'html,body { overflow: hidden; }' +
  '<\/style>' +
  '<\/head>' +
  '<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
  '<form class="expand close" name="f">' +
  '<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">' +
  '<\/textarea>' +
  '<\/form>' +
  '<\/body>' +
  '<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';

function init() {
  window.editbox.document.write(editboxHTML);
  window.editbox.document.close();
  window.editbox.document.f.ta.value = defaultStuff;
  update();
}

function update() {
  var textarea = window.editbox.document.f.ta;
  var d = dynamicframe.document;
  if (old != textarea.value) {
    old = textarea.value;
    d.open();
    d.write(old);
    if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, ''))
      d.write(extraStuff);
    d.close();
  }
  window.setTimeout(update, 150);
}

<frameset onload="init();" rows="50%,50%" resizable="no">
  <frame name="editbox" src="javascript:'';">
  <frame name="dynamicframe" src="javascript:'';">
</frameset>

此代码顶部有一个用户输入框，用于输入 HTML 代码，底部显示该代码在浏览器中的样子。

我将如何操作此代码以使用 divs 而不是框架，以便我可以包含额外的样式，这样它就不会在 HTML5 中完全折旧。

如果您的答案包含 AJAX，请您解释一下，因为我不熟悉该编码。

编辑：如果没有 div 替代方案，是否有 iframe 替代方案？

Answer 1

您可以只创建一个 div 标签，id 为 <div id='editbox' /> 并在您的更新函数中添加一行代码 document.getElementById("editbox").innerHTML=editboxHTML;

Answer 2

答案已更新
CSS固定
错误修复

Jquery方式：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var editboxHTML =
      '<html class="expand close">' +
      '<head>' +
      '<style type="text/css">' +
      '.expand { width: 100%; height: 50%; }' +
      '.close { border: none; margin: 0px; padding: 0px; }' +
      'html,body { overflow: hidden; }' +
      '<\/style>' +
      '<\/head>' +
      '<body class="expand close">' +
      '<form class="expand close" name="f">' +
      '<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">qweqwe' +
      '<\/textarea>' +
      '<\/form>' +
      '<\/body>' +
      '<\/html>';
    var defaultStuff = 'This top frame is where you put your code.';
    var extraStuff = '';
    var old = '';

    function init() {
        $("#editbox").html(editboxHTML);
        $("#editbox form[name='f'] [name='ta']").focus();
        $("#editbox form[name='f'] [name='ta']").val(defaultStuff);
        update();
    }

    function update() {
      var textarea = $("#editbox form[name='f'] [name='ta']");
      var d = $("#dynamicframe");
      if (old != textarea.val()) {
        old = textarea.val();
        if (old != undefined){
            d.html(old);
            if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, '')){
                d.append(extraStuff);
            }
        }
        else{
            d.html("old undefined");
        }
      }
      setTimeout("update()", 150);
    }
</script>
<button onclick="init()">EDIT</button>
<div id="editbox"></div>
<div id="dynamicframe"></div>

将 javascript 个生成的帧转换为 div

Converting javascript generated frames to divs

html

javascript

frames