Search code examples
javascripthtmlframes

Converting javascript generated frames to divs

I have some old code that I am trying to convert to divs. It contains frames that have no target src, just JavaScript to generate a page.

Below is the code...

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>

This code has a user input box at the top to input HTML code into, and the bottom displays what that code would look like in a browser.

How would I manipulate this code to work with divs instead of frames, so I can include extra styling, and so that it is not fully depreciated in HTML5.

If your answer includes AJAX, please can you explain it as I am not familiar with that coding.

EDIT: If there is no div alternative, is there an iframe alternative?

Solution

  • Answer Updated
    CSS Fixed
    Error fixed

    Jquery way:

    <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>