Javascript 奇怪的jQuery.load行为

我试图使用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>
...

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

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

drawings.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>

var init=函数（）{
var container=document.getElementById（'MyCanvas'）；
var canvas=document.createElement（'canvas'）；
canvas.width=container.clientWidth；
画布高度=1000；
container.appendChild（画布）；
返回画布；
}
window.onload=函数（）
{
var canvas=init（）；
var context=canvas.getContext（'2d'）；
context.beginPath（）；
//…这里有很多画
closePath（）；
};
...

当我移除这个画布并放置一些静态HTML时，它会毫无问题地显示出来

---

有人能解释一下这里发生了什么事吗

尝试将window.onload更改为命名函数，并在回调中调用该函数以加载。大概是这样的：

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

试试这个

$.get('/drawings.html', function(data) {
  $('div.dropzone').html(data);
  console.log('Load was performed.');
});

---

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

window.onload可能在加载drawings.html时已触发。为什么不使用jquery和文档的ready事件来执行所有init（）序列化和绘图呢。jQuery将始终调用您的函数，即使事件已经通过

---

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

您可以添加一个window.location（）；在div dropzone之后load@JonathanRomer：为什么？我正在尝试将其加载到div.I ment try location.reload（）；行为类似于“f5”。使用

.load

并不是不推荐的，而是事件之一被折旧。此外，问题出在drawings.html中的代码：它假设window.load未被激发。。。这只是有时候的情况。。。纯粹是偶然的。@BrianNoah:尝试过：没有任何区别。@Flot2011，请务必查看您的控制台以查看错误所在。还可以尝试console.log（data）查看是否有错误。我同意，看起来确实如此，问题是我能做什么？你不能使用窗口加载事件，而是按照steve guy的建议使用.load方法的回调。他可能永远不知道命名函数，因为它存在于外部脚本中。。。他可能有控制权，也可能没有控制权。好吧，你可以在回调中再次手动触发window.onload（），但我不确定这可能会导致什么副作用。假设我事先知道这个命名函数，这就可以了。所以我接受你的答案，并且+1它。现在的问题是，如何找到这个函数名。有没有什么方法可以“扫描”html文件并找到所有存在的函数？但我想这是另一个问题。这是可能的！在这里：

$.get('/drawings.html', function(data) {
  $('div.dropzone').html(data);
  console.log('Load was performed.');
});