在src-attribute中使用可變參數加載javascript

Question

我嘗試制作具有響應寬度的Google趨勢圖表。 但它不會工作。 它正在按原樣加載URL。 當我嘗試加載外部JavaScript時，頁面上未顯示任何圖表。 誰能幫我或給我提示嗎？

這是我的代碼：

<h1>Google Trends</h1>

<script>

 $(document).ready(function(){

  var chartwidth = ($('.content').innerWidth());

  $(function () {
   $('<script>')
    .attr('type', 'text/javascript')
    .attr('src',  '//www.google.com/trends/embed.js?hl=de&q=waffenbesitzkarte,+waffenpass,+waffenschein&geo=AT&date=today+24-m&cmpt=q&tz=Etc/GMT-1&tz=Etc/GMT-1&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=' + chartwidth + '&h=330')
    .replaceAll('#chartA');
  });

  $(function () {
   $('<script>')
   .attr('type', 'text/javascript')
   .attr('src',  '//www.google.com/trends/embed.js?hl=de&q=waffenrecht,+waffengesetz,+waffenbesitz&geo=AT&date=today+24-m&cmpt=q&tz=Etc/GMT-1&tz=Etc/GMT-1&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=' + chartwidth + '&h=330')
   .replaceAll('#chartB');
  });

 });
</script>

<div id="chartA"></div>

<div id="chartB"></div>

這是我更新的代碼：

<h1>Google Trends</h1>

<script>

 $(document).ready(function(){

  var chartwidth = ($('.content').innerWidth());

  $.getScript('//www.google.com/trends/embed.js?hl=de&q=waffenbesitzkarte,+waffenpass,+waffenschein&geo=AT&date=today+24-m&cmpt=q&tz=Etc/GMT-1&tz=Etc/GMT-1&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=' + chartwidth + '&h=330', function(data){
   $('#chartA').append(data);
  });

  $.getScript('//www.google.com/trends/embed.js?hl=de&q=waffenrecht,+waffengesetz,+waffenbesitz&geo=AT&date=today+24-m&cmpt=q&tz=Etc/GMT-1&tz=Etc/GMT-1&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=' + chartwidth + '&h=330', function(data){
   $('#chartB').append(data);
  });

 });

</script>

<div id="chartA"></div>

<div id="chartB"></div>

Answer 1

您只是在創建<script>標記的jQuery對象，而沒有插入DOM。 如果要包括外部JS文件，並且正在使用jQuery，請執行

 $.getScript("yourScript.js", function(){
    // Callback when script is completely loaded.
 });

對於您的情況，請執行以下操作：

$.getScript('//www.google.com/trends/embed.js?hl=de&q=waffenbesitzkarte,+waffenpass,+waffenschein&geo=AT&date=today+24-m&cmpt=q&tz=Etc/GMT-1&tz=Etc/GMT-1&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=' + chartwidth + '&h=330', function(){

});

Answer 2

http://www.google.com/trends/embed.js?hl=de&q=waffenbesitzkarte,+waffenpass,+waffenschein&geo=AT&date=today+24-m&cmpt=q&tz=Etc/GMT-1&tz=Etc/GMT-1&content= 1＆cid = TIMESERIES_GRAPH_0＆export = 5＆w = 400＆h = 330將返回一個JavaScript代碼段，該代碼段嘗試執行document.write。 您正在嘗試異步加載javascript（$。getScript），並且瀏覽器不允許異步加載的外部腳本寫入文檔。

您可以執行的操作是，通過添加與src相同的腳本標簽（與使用getScript（）進行加載一樣）來加載Google圖表的腳本。

希望這可以幫助！