google.load问题

Question

嗨,我正在使用谷歌ajax api在momemt,并按照文档中的示例我在我的html文件中有两个脚本标记:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">google.load('search', '1');</script>

一切正常,但是当我使用jquery并尝试调用google.load('search','1')时,它将无法正常工作; 在$(document).ready(function()之后的外部javascript文件中

我收到以下错误:null为null或不是对象.

我显然缺少一些基本的东西,因为我只是在学习javascript,但我的印象是最好不要不引人注意地使用javascript.实际包含一些js代码的第二个脚本标记不是不引人注目的.请问有人可以提供任何帮助吗？

Answer 1

根据您的解释,您的页面似乎设置如下:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load('jquery');
    $(document).ready(function(){
       ... do stuff ...
    });
</script>
<script src="/my/external.js" type="text/javascript"></script>

但是,这将无法正常工作,因为document.ready在DOM完全加载之前,事件不会触发.但是,JavaScript文件在加载时执行.所以实际执行看起来像这样:

1. 加载Google JSAPI
2. 加载jQuery
3. 加载External.js
4. 呼叫文件就绪

根据代码的其余部分,您可能希望将所有初始化代码放在单独的文件中,或者将search负载移回主文档.

关于非法行为代码:

大卫,不引人注目的JavaScript与它如何影响页面有关,而不是它是否是页内或外部.

它更多的是不让你的网站如此依赖于JavaScript,它不能在禁用它时起作用

例如,这是突兀的:

<a href="#" onclick="doSomething(); return false;">Click Me</a>

因为它只能在启用JavaScript的情况下使用.此外,代码是内联的,这是不好的,因为它没有将功能与结构(HTML)分开.

但是,采用类似的代码:

<a href="/do/something" id="do-something">Click Me</a>

并使用此javascript/jquery片段:

$(document).ready(function(){
    $("#do-something").click(function(e){
       doSomethingNicer();
       e.preventDefault(); // Keep the browser from following the href
    });
});

变得不显眼,因为页面仍然可以工作(默认情况下加载/执行/某些操作),但是当启用JavaScript时它会以更好的方式工作(执行javascript而不是加载该URL).这也称为渐进增强.