google.setOnLoadCallback 与 jQuery $(document).ready() 可以混合使用吗？

Question

我正在使用 Google Ajax API，他们建议我使用 google.setOnLoadCallback() 来执行与其 API 相关的各种操作，但我也使用 jQuery 的 $(document).ready() 做其他 JS 事情，与 Google API 无关。

将这两种方法混合在一个文档中是否安全？ 我还没有注意到任何问题，但我认为这是一个规模问题。

Answer 1

你几乎必须这样做：

google.setOnLoadCallback(function() {
  $(function() {
    // init my stuff
  });
});

如果没有可用的 $ （jQuery 对象），你就无法执行 $(document).ready() ，所以需要这样做在回调里面。 并且您无法确定文档在回调中是否已准备好，因此您也必须执行ready()。

Answer 2

很抱歉让这个问题复活，但是 1）它仍然是这个问题的“答案”，2）我找到了一个更好的解决方案。

google.load 函数上有一个可选的第三个参数，它接受配置选项的对象。 其中一个选项是回调。 它还消除了对单独的 setOnLoadCallback 调用的需要。

例如

google.load('visualization', '1.0', {
    'packages': "charttype", 
    'callback': $jQ.proxy(me.setupChart, me)
});

：

<script src="https://www.google.com/jsapi"></script>
<script>
$(document).ready(function () {
    function mapsLoaded() {
        etc etc etc
    }

    google.load("maps", "2", {"callback" : mapsLoaded});
});
</script>

参见：
https://developers.google.com/loader/#Dynamic

Answer 3

如果您的 JavaScript 代码驻留在其自己的 js 文件中，而不是在 HTML 文档中，您也可以在文档中执行此操作：

<script>
        google.load("jquery", "1.7.0");
        google.load("jqueryui", "1.8.16");
        google.setOnLoadCallback(function() {
             var script = document.createElement("script");
             script.setAttribute("type", "text/javascript");
             script.setAttribute("src", "my.js");
             document.getElementsByTagName("html")[0].appendChild(script);
        });
</script>

这会在从 google 加载所有其他内容后加载 my.js 。 然后，您可以在 my.js 文件中执行 $(document).ready(...) 操作。 因此，您的应用程序代码独立于“由谷歌加载”或“直接从您的服务器加载”。

Answer 4

当您可以使用 $(document).ready() 完成所有操作时，为什么要混合使用呢？ 只需摆脱 google.setOnLoadCallback 函数并使用 jQuery 的 $(document).ready() 即可。

这：

google.setOnLoadCallback(chartEnrollment);

变成

$(document).ready(chartEnrollment);