Dojo - 跨域加载小部件的问题答案

【问题标题】：Dojo - Issue loading widget cross-domainDojo - 跨域加载小部件的问题
【发布时间】：2012-07-26 01:10:51
【问题描述】：

我正在处理一个项目，该项目需要从另一台服务器加载一些自定义 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。但是，在“网络”选项卡中，我可以看到 Test.xd.js 已成功下载，并且我可以设置断点并看到 dojo.declare 执行并完成且没有错误。

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

【问题讨论】：

有机会升级到dojo 1.7 版吗？从那以后，dojo 以不同的方式处理 xdomain
对不起，我刚看到这个。我们无法升级到 1.7。

标签： dojo cross-domain

【解决方案1】：

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

即便如此，它们也很可能会被声明——dojotoolkit 1.7+ 版本的变化似乎承认了这一事实。我认为，原因是“模块就绪”的机制没有在您的 myModule.xd.js 模块中正确实现。

它基本上是声明的“标题”或“闭包”，涉及几个步骤 - 将 dojo.provide 和 eof 的所有内容包装在基本模块中

标准示例锅炉模块文件'{{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
      ///////////////////////////////
    }
  }
})();

【讨论】：