根据侧面板中的PHP代码实时更新网页预览面板

Question

I have created a website on a private network where the user can create and edit a page within the browser. The edit page basically has a split screen where the code is on the left and the preview of the code is on the right. I would like to get this preview to update in real-time as the user edits the code; however, I can only get it to update HTML code rather than the PHP code the user enters. After saving the file, the user sees the changes made by the PHP code; however, it doesn't work with real-time changes. Ideally, I would like this displayed in something like the iframe in the HTML preview code below but any solution you could offer would be great.

HTML Preview Page Code:

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

AJAX Call:

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

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

Thanks in advance for any help.

Answer 1

Here's the thing, There's no need to use iframe here

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

Simple this should work.

</div>