iT邦幫忙

0

關於 JavaScript 崁套 JavaScript 的問題

你好,我有兩個 JavaScript 檔案分別是 JS01.js , JS02.js。

JS02.js 檔案必須引用 JS01.js。

JS01.js 的檔案內容如下:


window.alert("Hello JS01");


JS02.js 的檔案內容如下:


document.write(unescape("%3Cscript src='JS01.js' type='text/javascript'%3E%3C/script%3E"));

window.alert("Hello JS02");


我現在遇到的問題是,
JS02 的程式 會比 JS01 的 程式先執行,也就是會先出現 "Hello JS02" 才會出現

"Hello JS01"。

我發現 只要在 JavaScript 檔案中崁套另一個 JavaScript 檔案的時候,就會出現這種情況。
程式的要求是,必須讓 JS01 先執行完成之後,才可以執行 JS02。
有人知道該如何解決這個問題嗎?
感謝回覆。

gituest iT邦新手 5 級 ‧ 2014-12-13 19:05:31 檢舉
先導入者先執行
把執行延後就可以了


document.write(unescape("%3Cscript src='JS01.js' type='text/javascript'%3E%3C/script%3E"));

setTimeout('window.alert("Hello JS02")',666);

1 個回答

4
fillano
iT邦超人 1 級 ‧ 2014-06-04 16:56:06
最佳解答

不要使用document.write。使用他會造成DOM reflow,這個動作會在目前執行的javascript程式區塊(JS02)結束後才會執行,然後才執行DOM reflow的結果,也就是JS01。所以執行的順序不如你的預期。

如果有模組依賴性,通常會建議使用RequireJS,不過我怕你還需要更熟悉Javascript與瀏覽器的運作,以及html, DOM等知識,再來使用比較好。

fillano iT邦超人 1 級 ‧ 2014-06-04 18:18:23 檢舉

我這樣講不太對。基本上,除非你知道你在做什麼,不然盡量使用DOM來操作html,不要使用document.write()。

至於DOM reflow,只要你動到DOM,不論用什麼方式都會發生。這個過程是非同步的,所以即使你改用appendChild把javascript node掛到DOM上,問題還是一樣。

一個簡單的作法:

<pre class="c" name="code">
<!doctype html>


<script>
function loadScript(url, cb) {
    var h = document.getElementsByTagName('head')[0];
    var n = document.createElement('script');
    n.src = url;
    n.type = 'text/javascript';
    if(!!cb && typeof cb === 'function') {
        n.addEventListener('load', function() {
            cb();
            h.removeChild(n);
        }, false);
    }
    h.appendChild(n);
}
</script>



<script>
loadScript('test930a.js', function() {
    loadScript('test930b.js');
});
</script>

test930a.js長這樣:

<pre class="c" name="code">
alert('js01');
function js02() {alert('js02')}

test930b.js使用到定義在test930a.js中的函數js02:

<pre class="c" name="code">
js02();

這樣就會依序跑出'js01'以及'js02'的訊息。

我要發表回答

立即登入回答