Add parameter to $.getScript

Question

I have an external JavaScript to call like this:

<script type="text/javascript" src="https://ndd.com/script.js" data-goal="12345"></script>

According to getScript, the call will be:

$.getScript("https://ndd.com/script.js", function(data, textStatus, jqxhr) {
  console.log(data); // Data returned
  console.log(textStatus); // Success
  console.log(jqxhr.status); // 200
  console.log("Load was performed.");
});

By the way I don't find any information about how to pass the data-goal parameter.

I can't use the standard way (add the first JavaScript example) in my code, and it needs to be called from a JavaScript file.

Any clue?

EDIT: For information, the Javascript is called but not executed. The only way it works is this one following:

var tagString ='<script type="text/javascript" src="https://ndd.com/script.js" data-goal="12345"></script>';
eval($('').find("script").text());
var range = document.createRange();
range.selectNode(document.getElementsByTagName("BODY")[0]);
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);

Alternatively, you can create script tag manually, assign the attributes and add it to the DOM. Browser will load and execute your script, the only thing you won't be able to do it so define a callback function. — Yeldar Kurmangaliyev, Oct 17 '19 at 14:18

score 2 · Accepted Answer · answered Oct 17 '19 at 16:16

You can create script tag manually, assign the attributes and add it to the DOM. After the tag is appended to the document, the browser will load and execute your script.

var script = document.createElement('script');
script.onload = function()
{
  // This proves that jQuery has been dynamically loaded and executed by browsers:
  console.log("jQuery has loaded with the following version: " + jQuery.fn.jquery);
  
  // This proves that the script tag contains a data-goal attribute
  console.log(document.body.innerHTML);
};
script.dataset.goal = 12345;
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
document.body.appendChild(script);

As Adassko already mentioned, there is a good SO questions which explains why it is a good idea to use vanilla JS instead of jQuery to append scripts manually:

Can't append <script> element

Adassko · Answer 2 · 2019-10-17T14:53:49.773

0

The question is how the script gets data from this data-... attribute. It probably iterates over all script elements and compares the src. The only way to pass this data will be to append script tag into DOM. You can use this code:

How to Append <script></script> in javascript?

to add data-... tags you simply use

script.dataset.goal = 12345;

~~or you can specify it when you create it with jQuery:~~

var s = $('<script type="text/javascript" src="https://ndd.com/script.js" data-goal="12345"></script>');
$('head').append(s);

(this way it wouldn't eval the script)

edited Oct 17 '19 at 14:53

answered Oct 17 '19 at 14:24

Adassko

5,201
20
37

On the second example, the javascript is loaded but not executed. I edited my original post to show what kind of code is loading the js and executing it. – zeflex Oct 17 '19 at 14:35
ok, seems that it's not possible to attach script tag as innerHTML and have it executed. Just use the first approach. Or you can use some asynchronous method such as https://stackoverflow.com/questions/7718935/load-scripts-asynchronously#7719185 – Adassko Oct 17 '19 at 14:54

Add parameter to $.getScript

2 Answers2