dynamic loading JavaScript
石頭閒語:Load and Execute JavaScript on Demand, by createElement
石頭閒語:Load and Execute JavaScript on Demand
最近碰到一個問題，需要動態的載入外部的JavaScript，因為是外部的domain，所以不能用XMLHttpRequest來載入，需要用document.createElement(script)來載入，使用這個方法有一個問題就是由於所有的script是同時的loading，會遇到還沒loading完的function執行會發生問題。解法簡單的說就是callee必須要改變一個global variable, caller必須每隔幾秒去檢查這個global variable，如果被改掉了，就是loading好了。
下面是會有問題的例子。
test.html
<html>
<head>
<script type="text/javascript" src="general.js"></script>
</head>
</html>
general.js
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'snip.js';
document.getElementsByTagName('head')[0].appendChild(script);
getSomething();snip.js
function getSomething(){
alert('something');
}
alert('hello'); 下面是按照石頭成改出來會work的例子：
general.js
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'snip.js';
document.getElementsByTagName('head')[0].appendChild(script);
window.loadingScript = 1;
var interval = setInterval(
function(){
if(window.loadingScript==0){
clearInterval(interval);
getSomething();
}
}, 1000
)snip.js
window.loadingScripts--;
function getSomething(){
alert('something');
}
沒有留言:
張貼留言