サイドパネルのPHPコードに基づいてウェブページのプレビューパネルをリアルタイムで更新する

Question

私は、プライベートネットワーク上でウェブサイトを作成しました。このウェブサイトでは、ブラウザ内のページを作成し編集することができます。編集ページには基本的にスプリットスクリーンがあり、コードは左側にあり、コードのプレビューは右側にあります。ユーザーがコードを編集するときに、このプレビューをリアルタイムで更新するようにしたいと思います。しかし、ユーザーが入力するPHPコードではなく、HTMLコードを更新することしかできません。ファイルを保存した後、ユーザーはPHPコードによる変更を確認します。ただし、リアルタイムの変更では機能しません。理想的には、私はこれをHTMLプレビューコードのiframeのようなもので表示したいと思いますが、あなたが提供できるソリューションはすばらしいでしょう。

HTMLプレビューページコード：

<section id='quickpreview' class='preview'> 
    <iframe id='preview' src='{$filepath}{$filename}'></iframe> 
</section>"; 

AJAXコール：

editor.on("change", function() { 
    if (location.href.indexOf("edit.php") != -1) { 
     var code = editor.getValue(); 
     $.ajax({url: "ajax.php?code=" + code, success: function(output) { 
      $("#quickpreview").html(output); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert(xhr.status + " "+ thrownError); 
     }}); 
    } 
}); 

AJAXページ：任意の助けを事前に

if (isset($_GET["code"])) { 
    echo $_GET["code"]; 
} 

感謝。ここで

Answer 1

は、ことだ、これは動作するはず、ここはiframeを使用する必要

<section id='quickpreview' class='preview'> 
 
    
 
</section>

シンプルはありません。