Ajax重新加載一個PHP頁面，該頁面顯示由Javascript更改的HTML-Canvas無法正常工作

Question

所以我有一個Ajax腳本，可以永久重新加載PHP頁面：

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            loadstatus();
        });
        function loadstatus(){
            $.ajax("innopbx.monitor.php").done(function(data){
                document.getElementById("status").innerHTML = data;
                setTimeout('loadstatus()', 1000);
            });
        }
    </script>

並且正在重新加載的PHP-Page顯示如下HTML-Canvas：

echo '<canvas id="' . $ui->guid . '" width="100" height="100" class="clear" style="border:1px dotted"></canvas> ';
echo '<script type="text/javascript">
  var a_canvas = document.getElementById("' . $ui->guid . '");
  var a_context = a_canvas.getContext("2d");
  var gradient = a_context.createLinearGradient(0, 0, 0, 100);
  gradient.addColorStop(0, "#bbffbb");
  gradient.addColorStop(1, "#55ff55");
  a_context.fillStyle = gradient;
  a_context.fillRect(2, 2, 96, 96);
  a_context.font = "10px sans-serif";
  a_context.fillStyle = "black";
  a_context.fillText("' . $ui->cn . '", 5, 20);
</script>';

當我直接導航到PHP頁面時，Canvas的繪制完全符合預期。 但是，當我導航到具有AJAX功能的Page（頁面）時，該功能會永久性地重新加載PHP-Page，我只會看到虛線邊框。 它沒有填充，沒有文本。

你有什么主意嗎？ 提前致謝！

Answer 1

您可以嘗試將document.getElementById("status")添加為$.ajax target參數。

var t = document.getElementById("status");
function loadStatus(){
   $.ajax({url: "innopbx.monitor.php", target: t, success: function(){
        setTimeout(loadstatus, 1000);
   });
}

它應該處理js執行，而不是innerHTML = ...