在Chrome中按順序加載腳本

我有一個外部腳本，後面跟着我的<body>底部的內聯腳本。它看起來像腳本在外部腳本，這是不應該發生之前運行的內聯，根據這樣的回答：在Chrome中按順序加載腳本

如果沒有動態加載腳本或將它們標記爲延遲或異步，然後腳本按頁面中遇到的順序加載。無論它是外部腳本還是內聯腳本 - 它們都按頁面遇到的順序執行。內部腳本之後的內聯腳本一直保存到之前的所有外部腳本已加載並運行。

的Src：https://stackoverflow.com/a/8996894/114855

這是我的代碼：

<script src="https://checkout.stripe.com/checkout.js"></script> 
    <script> 
    var handler = StripeCheckout.configure({ 
    key: 'pk_live_HhFqemZFyEUJVorFzYvjUK2j', 
    token: function(res) { 
     $('#pay_token').val(res.id); 
     $('#pay_email').val(res.email) 
     $('#pay_amount').val(parseFloat($("#amount").val())*100); 
     $('#pay_description').val($("#description").val()); 
     $('#pay_real').submit(); 
    } 
    }); 

    /* .. */ 
    </script> 

</body>

控制檯是表示StripeCheckout沒有定義（其外部腳本應該定義）

這是有道理的，因爲網絡選項卡顯示我的外部最終請求仍在等待中。但我不知道爲什麼瀏覽器沒有等待checkout.js是牽強：

Network

來源

2015-04-22 Colin

將外部文件加載到文檔的「頭部」 – APAD1

在報價問題兩個答案的評論表明，接受的答案不是由標準的支持參考（適用於所有常見的瀏覽器版本），並且在所有瀏覽器中都可能並非如此。

我可以證實這種行爲。但是我們的反饋頁面上有提示，它可能只在test.php被緩存時才起作用。你知道關於這個的任何規範/參考鏈接嗎？

這個答案不正確。「動態添加的腳本一旦被附加到文檔後就立即執行」並非總是如此。有時候這是真的（例如對於舊版本的Firefox），但通常情況並非如此。正如jfriend00的回答中提到的執行順序不是確定的

要完全安全，請等到DOM is fully rendered再運行腳本。

來源

2015-04-22 01:05:05

不對HTML5的建議（http://www.w3.org/TR/html5/scripting-1.html）確定腳本執行順序？ – Leo

@Leo：每個經常遇到的瀏覽器都實現html5規範嗎？ –

可能不是。 :-( - 雖然這裏有趣的事情是Chrome不知怎的錯過了它，看看這個規範說的是「每個帶有src屬性的腳本元素」。有點誤導我認爲。 – Leo

艾哈 - 我已經想通了！

這是運行TurboLinks的Rails應用程序的一部分。

TurboLinks動態更改主體內容，而不是每次點擊鏈接時都創建新的請求。這意味着我的腳本標籤被動態地插入，並保證它們按順序運行。

由於TurboLinks在每次請求不重新評估腳本標記，我認爲最簡單的/最佳這裏的解決方案是包括我的應用程序的每一個頁面（不只是它需要對一個人的）上StripeCheckout，內<head>

我也認爲TurboLinks可以通過找到一種按順序運行腳本的方法來解決這個問題。我打算跟進一個關於他們的github的問題，並會相應地在這裏更新。

來源

2015-04-23 18:57:28 Colin

在Chrome中按順序加載腳本

回答

相關問題