Ajax 重新加载显示由 Javascript 更改的 HTML 画布不起作用的 PHP 页面答案

【问题标题】：Ajax reloading a PHP-Page that shows HTML-Canvas altered by Javascript not workingAjax 重新加载显示由 Javascript 更改的 HTML 画布不起作用的 PHP 页面
【发布时间】：2012-08-21 22:31:57
【问题描述】：

所以我有一个永久重新加载 PHP 页面的 Ajax 脚本：

<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 页面显示 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 页面时，画布完全按照预期绘制。但是，当我使用永久重新加载 PHP 页面的 AJAX 功能导航到页面时，我只看到虚线边框。它没有填充，也没有文本。

你有什么想法吗？提前致谢！

【问题讨论】：

尝试在 PHP 页面的
直接导航到 PHP-Page 时弹出警告。导航到刷新 PHP 页面的页面时，不会弹出警报。

标签： php javascript html ajax canvas

【解决方案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 = ...。

【讨论】：