Question

我使用the Boxer library from www.formstone.it在我的HTML页面上显示模态弹出窗口。在触发模态窗口时，HTML内容从我服务器上的文件加载到模态DIV中。义和团代码：

$(".boxer.boxer_object").click(function(e) {

    e.preventDefault();
    e.stopPropagation();

    $obj = $('<div class="outer_container" />').load("http://www.myserver.com/game_modal.html",function(){

    setTimeout(function (){

        ... Kinetic code which loads several image and GUI elements for a simple game ...

    }, 2000); // delay Kinetic code execution with 2 seconds

    $.boxer($obj);

});

即使它看起来只是在HTML代码加载后才执行KineticJS代码，但我仍偶尔会出现以下错误：

未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39;为null

据我所知，当画布试图瞄准尚不存在的DIV时会发生此错误。换句话说，KineticJS代码在代码加载之后执行，但是在相关容器DIV成为页面结构的一部分之前。

如上面的代码所示，我现在使用setTimeout（）函数延迟2秒的KineticJS代码执行。即使不太理想，我还没有再次看到错误，每次加载游戏图形。但是，这是一个可能在我的浏览器上工作的修复程序，但在其他条件下可能对其他人失败。

是否有正确的方法确保在外部加载的HTML代码成为页面结构的一部分后，KineticJS代码将始终执行？即在KineticJS代码为HTML5画布定位的容器DIV实际存在之后？

Answer 1

你应该可以跳过ajax调用并渲染游戏的容器并手动加载标记：

var $game = $('<div id="outside_container" style="text-align:center; width:900px; height=600px;"><span style="display:inline-block; line-height:600px; font-size: 4em;">LOADING...</span></div>');

然后使用＆＃39;回调＆＃39;初始化游戏的选项：

$boxer($game, {
    callback: initGame
});

function initGame() {
    // kinetic js code
    ...
}

Answer 2

免责声明：我还没有使用拳击手。

我快速浏览了你的拳击手链接。

在打开实例＆＃34;。

后，会有一个回调执行＆＃34;

如何将您的Kinetic代码放入可以提供给拳击手的回调功能中。

Answer 3

根据我的理解，当div事件发生时，您正尝试使用'outer_container'类创建onclick。然后，您希望从Web服务“加载”您的游戏模式，然后在返回时异步（通过回调）运行动能js和拳击手代码。

异步功能总是有点繁琐。在您的异步事件链中，我认为在将.load（）函数附加到它的同时创建div意味着有时Web服务可能在创建div之前就绪。

您是否尝试在调用指向该元素的Web服务之前创建div元素？

您可以在首次初始化页面时创建div或尝试此操作...

$(".boxer.boxer_object").click(function(e) {

    e.preventDefault();
    e.stopPropagation();

    //create the div first before the web service call to ensure it exists...

    var obj = document.createElement('div');
    obj.setAttribute('class', 'outer_container');

    $('.outer_container').load("http://www.myserver.com/game_modal.html",function(){

        //your code here, called after the web service has returned data...

        $.boxer(obj);

    });

我个人只会在声明div事件之前声明'outer_container'onclick。

我希望这会有所帮助:)。

确保在外部加载DIV后，Kinetic代码始终执行

3 个答案: