Dojo - 问题加载小部件跨域

时间:2012-07-24 15:15:57

标签: dojo cross-domain

我正在开发一个项目,该项目要求从另一台服务器加载一些自定义Dojo小部件(即我们自己编写的小部件)。尽管我花了好几天的努力,但似乎无法让Dojo加载小部件。

Dojo从Google CDN加载,小部件从www.example.com加载,网站位于www.foo.com。

我无法发布实际的项目文件(这是一个公司的项目),但我用较小的测试文件重现了错误。

Test.html(在www.foo.com上):

<html>

<div id="content"></div>

<script>
    var djConfig = {
        isDebug: true,
        modulePaths: {
            'com.example': 'http://example.com/some/path/com.example'
        }
    }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js.uncompressed.js"></script>

<script type="text/javascript">
    dojo.require("dijit._Widget");
    dojo.require("dijit._Templated");

    dojo.addOnLoad(function() {
        dojo.require("com.example.widget.Test", false);

        dojo.addOnLoad(function() {
            new com.example.widget.Test().placeAt(dojo.byId('content'));
        });
    });
</script>

</html>

Test.xd.js(www.example.com/some/path/com.example/widget/Test.xd.js):

dojo.provide("com.example.widget.Test");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("com.example.widget.Test", [dijit._Widget, dijit._Templated], {
    templateString: "<div dojoAttachPoint=\"div\">This is a test</div>",

    postCreate: function() {
        console.log("In postCreate");
        console.log(this.div);
        this.div.innerHTML += '!!!';
    }
});

在Firebug中,我在几秒钟的延迟后看到错误,说无法加载跨域资源com.example.widget.Test。但是,在'Net'选项卡中,我能够看到Test.xd.js已成功下载,并且我能够设置断点并看到dojo.declare执行并完成且没有错误。

我感谢任何帮助。如果我能提供任何其他信息,请告诉我。

1 个答案:

答案 0 :(得分:1)

在XD-loader中处理模块声明有不同的方法。这是由于加载程序如何处理“模块就绪”事件。你很可能会体验到,dojo.addOnLoad永远不会运行,因为它“确实”知道 - 某些必需的模块未被声明。

即便如此,它们很可能被宣布 - 并且1.7版本的dojotoolkit的变化似乎重新认识到了这一事实。我相信,其原因在于,模块就绪的机制未在myModule.xd.js模块中正确实现。

它基本上是声明的“标题”或“结束”,包含几个步骤 - 从dojo.provideeof

包装基本模块中的所有内容

标准示例锅炉模块文件'{{modulePath}} / my / Tree.js'

dojo.provide("my.Tree");

dojo.require("dijit.Tree");

dojo.declare("my.Tree", dijit.Tree, {
    // class definition
});

X-Domain示例锅炉模块文件'{{modulePath}} / my / Tree.xd.js

dojo._xdResourceLoaded(function(){ 
  return {
    depends: [
        ["provide", "my.Tree"],
        ["require", "dijit.Tree"]
    ],
    defineResource: function(dojo) {
      ///////////////////////////////
      /// Begin standard declaration
         dojo.provide("my.Tree");

         dojo.require("dijit.Tree");

         dojo.declare("my.Tree", dijit.Tree, {
            // class definition
         });
      /// End standard declaration
      ///////////////////////////////
    }
  }
})();