загрузка javascript с переменным параметром в src-attribute

Question

Я пытаюсь сделать диаграммы Google Trends с гибкой шириной. Но это не сработает. Он загружает 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

Вы просто создать jQuery объект в <script> тега, и вы не insterting и 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 асинхронно ($. GetScript), и браузеры не позволяют асинхронно загружать внешний скрипт для записи в документ.

Что вы можете сделать, это загрузить скрипт графиков Google, добавив тег сценария с src так же, как вы загружаетесь с помощью getScript().

Надеюсь, это поможет!