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
– Yeldar Kurmangaliyev, Commented Oct 17, 2019 at 14:18

Yeldar Kurmangaliyev · Accepted Answer · 2019-10-17 16:16:29Z

2

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

answered Oct 17, 2019 at 16:16

Yeldar Kurmangaliyev

34.3k13 gold badges64 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adassko · Accepted Answer · 2019-10-17 14:53:49Z

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, 2019 at 14:53

answered Oct 17, 2019 at 14:24

Adassko

5,36326 silver badges40 bronze badges

2 Comments

zeflex Over a year ago

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.

Adassko Over a year ago

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 stackoverflow.com/questions/7718935/…

Collectives™ on Stack Overflow

Add parameter to $.getScript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related