将javascript生成的帧转换为div答案

【问题标题】：Converting javascript generated frames to divs将javascript生成的帧转换为div
【发布时间】：2016-04-11 05:58:59
【问题描述】：

我有一些旧代码正在尝试转换为 div。它包含没有目标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 代码，底部显示该代码在浏览器中的样子。

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

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

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

【问题讨论】：

那么，为什么需要框架？
我不需要它们，因为它们已经贬值了，所以我想将它们转换为符合 HTML5 的divs
只需使用 div 删除您的框架并将您的 javascript 移动到该页面。 Jquery 也会有所帮助
你能给我一些代码来试试@oki吗？
有 iframe 替代品吗？

标签： javascript html frames

【解决方案1】：

答案已更新
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>

【讨论】：

我们可以去掉按钮并让它在加载时初始化吗？
只需将init()函数放在javascript末尾

【解决方案2】：

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

【讨论】：

你能给我一把小提琴吗？