JavaScript加载顺序

问题描述 投票:29回答:8

我正在与amq.js(ActiveMQ)和Google Maps合作。我按此顺序加载脚本

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>AMQ & Maps Demo</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" type="text/css" href="style.css"></link>

    <!-- Google APIs -->
    <script type="text/javascript" src="http://www.google.com/jsapi?key=abcdefg"></script>

    <!-- Active MQ -->
    <script type="text/javascript" src="amq/amq.js"></script>
    <script type="text/javascript">amq.uri='amq';</script>

    <!-- Application -->
    <script type="text/javascript" src="application.js"></script>
</head>

但是在我的application.js中它加载了地图很好但是在尝试使用AMQ订阅主题时出现错误。 AMQ依赖于Firefox中错误控制台所说的对象未定义的原型。我认为在脚本加载完成之前使用amq对象时遇到问题。有没有办法确保在我的application.js中使用它们之前加载两个脚本?

谷歌有这个很好的功能调用google.setOnLoadCallback(initialize);很好。我不确定amq.js有这样的东西。

javascript google-maps activemq
8个回答
27
投票

有没有办法确保在我的application.js中使用它们之前加载两个脚本?

JavaScript文件应该按顺序加载并阻塞,除非您依赖的脚本正在做一些不寻常的事情,您需要做的就是在其他文件之后加载application.js。

Non-blocking JavaScript Downloads有一些关于脚本如何加载的信息(并讨论了一些颠覆阻塞的技术)。


44
投票

跨域脚本是在站点本身的脚本之后加载的,这就是你得到错误的原因。有趣的是,这里没人知道。


9
投票

在jquery中你可以使用:

$(document).ready(function(){/*do stuff here*/});

这确保了javascript的加载和dom准备就绪,然后才能完成你的工作。

在原型中看起来这可能会起作用

document.observe("dom:loaded", function() {/*do stuff here*/});

如果我正确理解你的问题..我认为这可能会有所帮助..

如果您不想依赖lib来执行此操作...我认为这可能有效:

<script>
   function doIt() {/*do stuff here*/}
</script>
<body onLoad="doIt();"></body>

7
投票

我遇到了类似的问题,只有一个脚本。我想出的解决方案是将addEventListener("load",fn,false)用于使用script创建的document.createElement('script')对象。这是加载任何标准JS文件的最终函数,并允许您添加“后加载”脚本。

function addJavaScript( js, onload ) {
   var head, ref;
   head = document.getElementsByTagName('head')[0];
   if (!head) { return; }
   script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = js;
   script.addEventListener( "load", onload, false );
   head.appendChild(script);
}

我希望这有助于将来的某些人。


3
投票

有没有办法确保在使用它们之前加载两个脚本?

是。

把你想要加载的代码(你的application.js东西)放入原型的document.observe中。这应该确保代码只在原型+其他东西完成并准备就绪后加载。 (如果你熟悉jQuery,这个函数类似于jQuery的$(document).ready


2
投票

AMQ依赖于原型,FireFox中的错误控制台表示对象未定义。

你是说AMQ取决于Prototype library?我在您提供的代码中看不到该库的导入。


2
投票

你的意思是AMQ依赖于Prototype库吗?我在您提供的代码中看不到该库的导入。

是的,因为ActiveMQ的javascript(amq.js)确实依赖于Prototype。在amq.js中,它加载了3个脚本,_amq.js,behaviour.js和prototype.js。

感谢您对JavaScript加载顺序wrumsby的帮助。这告诉我,我的虫子在另一座城堡里:(

我想我有一个不同的问题。我还检查了从ActiveMQ 5.0到5.1的js文件,并注意到它们也是一样的。 5.0到5.1中的某些内容已经发生变化,需要刷新主题才能订阅。我会继续寻找,但谢谢你消除这个可能的原因。


0
投票

您还可以使用内置的SharePoint javascript方法来控制脚本的执行;

_spBodyOnLoadFunctionNames.push("yourFunction");
© www.soinside.com 2019 - 2024. All rights reserved.