1

我正在尝试使用 jQuery.load() 方法将外部 html 加载到 div 中。我从 document.ready() 调用这个方法。

html.1

    <script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>
    <script type='text/javascript' src='js/script1.js'></script>
...

script1.js

$(document).ready(function() {
        $('div.dropzone').load('drawings.html');
});

该文件已加载，但直到我按 F5（刷新），有时甚至是 ctrl F5 时才会显示，有时（3-5）。如果我不按 F5 ，则永远不会显示该页面，但是按某些 F5 始终会显示该页面。

加载到 div 中的 HTML 在其 window.onload 中进行了大量的画布绘制。

图纸.html

<script>
var init = function() {
   var container = document.getElementById('MyCanvas');
   var canvas = document.createElement('canvas');
   canvas.width = container.clientWidth;
   canvas.height = 1000;
   container.appendChild(canvas);
   return canvas;
}

window.onload = function()
{
   var canvas = init();
   var context = canvas.getContext('2d');
   context.beginPath();
   //... lots of drawings here
   context.closePath();
};

</script>
...
<div id='MyCanvas'>
</div>

当我删除这个画布的东西并放置一些静态 HTML 时，它显示没有任何问题。

有人可以解释这里发生了什么吗？

4

4 回答 4

2

尝试将 window.onload 更改为命名函数，并在回调中调用该函数进行加载。像这样的东西：

$(document).ready(function() {
   $('div.dropzone').load('drawings.html', function() {
      doMyNewNamedFunction();
    }
});
于 2012-10-11T19:00:05.613 回答
0

试试这个

$.get('/drawings.html', function(data) {
  $('div.dropzone').html(data);
  console.log('Load was performed.');
});
于 2012-10-11T19:00:10.173 回答
0

您看到的是一种竞争条件，有时窗口加载事件会在您的 div 完成加载内容之前触发，导致加载的 js 绑定到已经触发且不会再次触发的事件。

于 2012-10-11T19:01:11.010 回答
0

window.onload 可能在 drawing.html 加载时已经触发。为什么不使用 jquery 和文档的 ready 事件来完成所有的 init() 初始化和绘图。jQuery 将始终调用您的函数，即使事件已经通过。

顺便说一句 - 我是真正的 javascript 的忠实拥护者......但在这种情况下，您已经在页面上拥有了一个可靠的框架......使用它；）

于 2012-10-11T19:02:43.977 回答