Fatal编程技术网
  • jquery/
  • 使用jQuery从CDN加载Dojo

使用jQuery从CDN加载Dojo

jquery dojo

使用jQuery从CDN加载Dojo,jquery,dojo,cdn,Jquery,Dojo,Cdn,这是我从中选取的一个例子，有点改变。这个例子非常有效 <!DOCTYPE HTML> <html lang="en"> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen"> <script type=

这是我从中选取的一个例子，有点改变。这个例子非常有效

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
        <script type="text/javascript">
            dojoConfig = {
                parseOnLoad: false,
                async: true
            };
        </script>   
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" type="text/javascript"></script>
        <script type="text/javascript">
            /// Require the registry, parser, Dialog, and wait for domReady
            require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) {
                // Explicitly parse the page
                parser.parse();
                // Find the dialog
                var dialog = registry.byId("dialog");
                // Set the content equal to what dojo.config is
                dialog.set("content", "<b>it works!</b>");
                // Show the dialog
                dialog.show();
            });
        </script>
    </head>
    <body class="claro">
        <div id="dialog" data-dojo-type="dijit.Dialog"></div>
    </body>
</html>
我怀疑Dojo还没有准备好，但也许我错了。。。是否可以使用jQuery动态加载Dojo？

加载程序试图定位加载Dojo的脚本标记，导致“未找到节点”错误。这是Dojo在从CDN（如您使用的Google）加载时尝试查找加载模块的url路径时使用的技巧

jQuery$.getScript（）函数实际上并不是将脚本标记注入页面，而是通过XHR加载，然后求值代码。因此，找不到Dojo正在查找的标记。这仅在使用CDN时发生。如果您使用自己的Dojo本地副本而不是CDN，则可以使其正常工作

我不确定通过jQuery加载Dojo是否是一种好的做法。最好是分别加载这两个函数，或者反过来加载（即在Dojo内部加载jQuery）。我假设您需要两者的功能，否则您不会尝试这个

要将jQuery作为Dojo模块加载，可以按如下方式修改代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <link
        rel="stylesheet"
        href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css"
        media="screen"
    />
    <script type="text/javascript">
        var dojoConfig = {
            "parseOnLoad": false,
            "async": true,
                "packages": [{
                    "name": "jquery",
                    "location": "//ajax.googleapis.com/ajax/libs/jquery/1.9.0",
                    "main": "jquery.min"
                }]
        };
    </script>
    <script
        type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"
    ></script>
    <script type="text/javascript">
        define.amd.jQuery = true;  // jQuery will be loaded as an AMD module

        require([
            "jquery",
        ], function($){
            // NB: $ is only available within the scope it has been loaded
            // as it is loading as an AMD module.  Hence, $ is not globally
            // available and must be required into any scope it is used.

            $(document).ready(function () {
                require([
                    "dijit/registry",
                    "dojo/parser",
                    "dojo/json",
                    "dojo/_base/config",
                    "dijit/Dialog"
                ], function (registry, parser, JSON, config) {
                    // Explicitly parse the page
                    parser.parse();
                    // Find the dialog
                    var dialog = registry.byId("dialog");
                    // Set the content equal to what dojo.config is
                    dialog.set("content", "<b>it works!</b>");
                    // Show the dialog
                    dialog.show();
                });
            });
        })
    </script>
</head>
<body class="claro">
    <div id="dialog" data-dojo-type="dijit/Dialog">
    </div>
</body>
</html>


var dojoConfig={
“parseOnLoad”：false，
“异步”：true，
“包”：[{
“名称”：“jquery”，
“位置”：“//ajax.googleapis.com/ajax/libs/jquery/1.9.0”，
“main”：“jquery.min”
}]
};
define.amd.jQuery=true；//jQuery将作为AMD模块加载
要求([
“jquery”，
]，函数（$）{
//注意：$仅在已加载的范围内可用
//因为它是作为AMD模块加载的。因此，$不是全局的
//可用，且必须包含在其使用的任何范围内。
$（文档）.ready（函数（）{
要求([
“dijit/注册表”，
“dojo/parser”，
“dojo/json”，
“dojo/_base/config”，
“dijit/Dialog”
]，函数（注册表、解析器、JSON、配置）{
//显式解析页面
parser.parse（）；
//找到对话框
var dialog=registry.byId（“dialog”）；
//将内容设置为dojo.config的值
设置（“内容”，“它工作！”）；
//显示对话框
dialog.show（）；
});
});
})
最好还是坚持使用Dojo，而不是同时使用两者。但是，上述两种方法可同时使用。Dojo有自己的ready函数（）可以替换$（document）.ready（）。jQuery的大部分功能都是在Dojo中的某个庄园中复制的

将jQuery作为Dojo模块加载意味着它仅在require回调中可用。因此，$并不像通常情况那样放在全局范围内。您必须将它转换为您需要的任何JavaScript

NB:我将代码中的dijit.Dialog更改为dijit/Dialog，因为如果使用点格式，它将不会加载到版本1.8中。

好的，看来我终于找到了基于。。。以下是工作示例：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        function loadScript(url, callback) {
            var script = document.createElement("script")
            script.type = "text/javascript";

            if (script.readyState) {  //IE
                script.onreadystatechange = function () {
                    if (script.readyState == "loaded" ||
                    script.readyState == "complete") {
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else {  //Others
                script.onload = function () {
                    callback();
                };
            }

            script.src = url;
            document.body.appendChild(script);
        }

        $(document).ready(function () {
            dojoConfig = {
                parseOnLoad: false,
                async: true
            };

            loadScript("http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js", function () {
                /// Require the registry, parser, Dialog, and wait for domReady
                require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) {
                    // Explicitly parse the page
                    parser.parse();
                    // Find the dialog
                    var dialog = registry.byId("dialog");
                    // Set the content equal to what dojo.config is
                    dialog.set("content", "<b>it works!</b>");
                    // Show the dialog
                    dialog.show();
                });
            });
        });
    </script>
</head>
<body class="claro">
    <div id="dialog" data-dojo-type="dijit.Dialog">
    </div>
</body>
</html>


函数装入脚本（url、回调）{
var script=document.createElement（“脚本”）
script.type=“text/javascript”；
if（script.readyState）{//IE
script.onreadystatechange=函数（）{
如果（script.readyState==“已加载”||
script.readyState==“完成”）{
script.onreadystatechange=null；
回调（）；
}
};
}其他{//其他
script.onload=函数（）{
回调（）；
};
}
script.src=url；
document.body.appendChild（脚本）；
}
$（文档）.ready（函数（）{
dojoConfig={
parseOnLoad:false，
异步：true
};
加载脚本（“http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js“，函数（）{
///需要注册表、解析器、对话框，然后等待domReady
require（[“dijit/registry”、“dojo/parser”、“dojo/json”、“dojo/_base/config”、“dijit/Dialog”]），函数（注册表、解析器、json、配置）{
//显式解析页面
parser.parse（）；
//找到对话框
var dialog=registry.byId（“dialog”）；
//将内容设置为dojo.config的值
设置（“内容”，“它工作！”）；
//显示对话框
dialog.show（）；
});
});
});
这不是纯jQuery解决方案，但对我来说最好在页面上包含Dojo脚本…

引发了什么错误？请在您的问题中包含相关细节。刚刚更新了文本…刚刚注意到您几天前发布的另一个问题（在放置我的答案后）。如果您同时需要Dojo和jQuery，并且需要使用CDN，那么我建议您在头脑中同时加载它们。Dojo1.8加载器是最小的（特别是在使用bulit版本时），因此开销很小。只有当您选择加载或解析某些内容时，才会加载额外的模块。您也可以加载本地版本的dojo加载程序，但是通过为dojo、dojox和dijit设置适当的值来从CDN加载模块（这应该可以工作，因为加载程序正在破坏一切）。没错。实际上，我必须从CDN（而不是从本地服务器）加载jQuery和Dojo，原因是 
<!DOCTYPE HTML>
<html lang="en">
<head>
    <link
        rel="stylesheet"
        href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css"
        media="screen"
    />
    <script type="text/javascript">
        var dojoConfig = {
            "parseOnLoad": false,
            "async": true,
                "packages": [{
                    "name": "jquery",
                    "location": "//ajax.googleapis.com/ajax/libs/jquery/1.9.0",
                    "main": "jquery.min"
                }]
        };
    </script>
    <script
        type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"
    ></script>
    <script type="text/javascript">
        define.amd.jQuery = true;  // jQuery will be loaded as an AMD module

        require([
            "jquery",
        ], function($){
            // NB: $ is only available within the scope it has been loaded
            // as it is loading as an AMD module.  Hence, $ is not globally
            // available and must be required into any scope it is used.

            $(document).ready(function () {
                require([
                    "dijit/registry",
                    "dojo/parser",
                    "dojo/json",
                    "dojo/_base/config",
                    "dijit/Dialog"
                ], function (registry, parser, JSON, config) {
                    // Explicitly parse the page
                    parser.parse();
                    // Find the dialog
                    var dialog = registry.byId("dialog");
                    // Set the content equal to what dojo.config is
                    dialog.set("content", "<b>it works!</b>");
                    // Show the dialog
                    dialog.show();
                });
            });
        })
    </script>
</head>
<body class="claro">
    <div id="dialog" data-dojo-type="dijit/Dialog">
    </div>
</body>
</html>

<!DOCTYPE HTML>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        function loadScript(url, callback) {
            var script = document.createElement("script")
            script.type = "text/javascript";

            if (script.readyState) {  //IE
                script.onreadystatechange = function () {
                    if (script.readyState == "loaded" ||
                    script.readyState == "complete") {
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else {  //Others
                script.onload = function () {
                    callback();
                };
            }

            script.src = url;
            document.body.appendChild(script);
        }

        $(document).ready(function () {
            dojoConfig = {
                parseOnLoad: false,
                async: true
            };

            loadScript("http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js", function () {
                /// Require the registry, parser, Dialog, and wait for domReady
                require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) {
                    // Explicitly parse the page
                    parser.parse();
                    // Find the dialog
                    var dialog = registry.byId("dialog");
                    // Set the content equal to what dojo.config is
                    dialog.set("content", "<b>it works!</b>");
                    // Show the dialog
                    dialog.show();
                });
            });
        });
    </script>
</head>
<body class="claro">
    <div id="dialog" data-dojo-type="dijit.Dialog">
    </div>
</body>
</html>