使用 $.append 時的 jQuery 腳本標簽執行順序

Question

通常，當我在 HTML 頁面上有類似以下內容時，它工作得很好。 本地腳本塊僅在外部腳本塊加載完成后執行。

<div id="curve_chart" style="width: 900px; height: 500px"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">         
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004',  1000,      400],
        ['2005',  1170,      460],
        ['2006',  660,       1120],
        ['2007',  1030,      540]
        ]);
        
        var options = {
        title: 'Company Performance',
        curveType: 'function',
        legend: { position: 'bottom' }
        };
        
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        
        chart.draw(data, options);
    }         
</script>

但是，如果我將上面的代碼和 append 放到這樣的 DIV 容器中：

$("#some_element").append($.parseHTML([code from above here], document, true));

它給了我消息“未捕獲的 ReferenceError：未定義 google”。 我認為問題在於，當像這樣附加這段代碼時，腳本標簽的順序不被尊重，或者它只是並行加載所有腳本標簽？！

現在我知道有解決方法（主要使用 $.getScript 和回調），但我想知道為什么會這樣，以及是否有辦法讓它按預期工作。

Answer 1

當您將 append 和 HTML 字符串連接到 DOM 節點時，默認瀏覽器行為會阻止腳本執行（作為防止 XSS 攻擊的安全步驟）。 jQuery 所做的（據我所知）是重新評估這些腳本。 在有腳本 URL 的情況下，jQuery 發送 AJAX 請求。 如您所知，AJAX 是異步的，這意味着腳本可以按任何順序解析（與直接使用 HTML 時發生的情況不同）。 因此，嵌入式 JavaScript 在依賴腳本之前執行。 您可以通過檢查網絡選項卡了解更多信息。

 $('#someContainer').append(` <div id="curve_chart" style="width: 900px; height: 500px"><\/div> <script type="text\/javascript" src="https:\/\/www.gstatic.com\/charts\/loader.js"><\/script> <script type="text\/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } <\/script> `);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="someContainer"></div>

在下面的屏幕截圖中，您可以看到loader.js腳本的請求發起者是 jQuery。 在右側面板上，您可以在調用堆棧中看到ajax 。