Как удалить / удалить элемент из тела происходит из головы? - PullRequest
Новая
       26

Как удалить / удалить элемент из тела происходит из головы?

1 голос
/ 06 апреля 2020

Я создал редактор, используя CodeMirror. Там я использовал три различных режима HTML, CSS и JavaScript.

Но проблема в том, что когда я использовал document.write, чтобы получить содержимое редактора (приведенное ниже как html код редактора) для мой iframe, теги (title, meta) раздела head также идут в раздел body.

Я использовал код: 

$("#result").contents().find("body").children('title').remove();

для удаления дубликата элемента (title) из body , Но я думаю, что это не идеальное решение. Есть ли лучший? 

  //javascript/jquery code I have used to
    var iframe = document.getElementById('result');
    var result = iframe.contentDocument || iframe.contentWindow.document;
    result.open();
    var load_code = update_code = function () {
      result.write(html_editor.getValue());
      result.head.innerHTML += "<style type='text/css'>" + css_editor.getValue() + "</style>";
      result.close();
    }
    result.close();

    var editor_body = function () {
      $("#result").contents().find("body").html((html_editor.getValue()) + "<script type='text/javascript'>" + js_editor.getValue() + "")
      $("#result").contents().find("body").children('title').remove();
    }
    $(window).on('load', editor_body);
    $("button").on('click', editor_body);
/* my html code for editor and preview*/
<div class="mainArea">
    <div class="editor_area">
      <div class="editor_nav">
        <button onclick="openMenu()"><i class="fa fa-bars"></i></button>
        <button onclick="update_code()"><i class="fa fa-play"></i></button>
      </div>
      <div class="editors">
        <div id="html_editor"></div>
        <div id="css_editor"></div>
        <div id="js_editor"></div>
      </div>
    </div>
    <div class="preview_area">
      <div class="browser_title_bar">
        <span id="dot1"></span>
        <span id="dot2"></span>
        <span id="dot3"></span>
      </div>
      <iframe id="result">Example</iframe>
    </div>
  </div>



/* ===== html editor value ===== */
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Page Title</title>
</head>

<body>
  <h1>I am Heading 1</h1>
  <p>This is a Paragraph.</p>
  <p id="demo">I am another Paragraph.</p>
</body>
</html>
...