CODEWITHSUNDEEP
javascriptjqueryajaxweb-development-server
cconsta1
cconsta1

Reputation: 855

Load an external JavaScript library into your code and modify parts of the library?

I'm trying to load an external JavaScript library into my code:

var s = document.createElement("script");
s.type = "text/javascript"; s.src = "http://vcg.isti.cnr.it/3dhop/distribution/js/presenter.js"; $(useTab).append(s);

I know that in the library presenter.js" I need to change some const variables into var. I checked that by downloading a local copy of presenter.js" on my server and making that change. However, I need that library to be loaded from the internet. The question is, can I modify an external JavaScript library and make my program work?

I read elsewhere in StackOverflow that you can try ajax:

$.ajax({ method: 'GET', dataType: 'text', url: 'http://vcg.isti.cnr.it/3dhop/distribution/js/presenter.js' }).then(function(data) { data = data.replace('const SGL_TRACKBALL_NO_ACTION = 0;', 'var SGL_TRACKBALL_NO_ACTION = 0;') data = data.replace('const SGL_TRACKBALL_ROTATE = 1;', 'var SGL_TRACKBALL_ROTATE = 1;') data = data.replace('const SGL_TRACKBALL_PAN = 2;', 'var SGL_TRACKBALL_PAN = 2;') data = data.replace('const SGL_TRACKBALL_DOLLY = 3;', 'var SGL_TRACKBALL_DOLLY = 3;') data = data.replace('const SGL_TRACKBALL_SCALE = 4;', 'var SGL_TRACKBALL_SCALE = 4;') eval(data) })

But I had no luck. I'm new to JavaScript so any help will be appreciated. I'm not sure that what I'm asking is doable though. Thank you in advance!

Edit:

Hi guys and thank you for your responses! Ok, I tried the following:

var scripts = ["spidergl.js", "presenter.js", "nexus.js", "ply.js", "trackball_sphere.js",
    "trackball_turntable.js", "trackball_turntable_pan.js", "trackball_pantilt.js", "init.js"];

for (index = 0; index < scripts.length; index++) {
    scripts[index] = "http://vcg.isti.cnr.it/3dhop/distribution/js/" + scripts[index];
  }

  getScripts(scripts, function () {

    $(document).ready(function () {
      init3dhop();

      setup3dhop(referenceUrl, fileType);

      resizeCanvas(640, 480);

      moveMeasurementbox(70, 243);
      movePickpointbox(70, 301);

      //moveToolbar(20, 20);                                                                                                            
    });

  });

Here is the utility function getScripts:

function getScripts(scripts, callback) {
  var progress = 0;
  scripts.forEach(function (script) {
    $.getScript(script, function () {
      if (++progress == scripts.length) callback();
    });
  });
}

So far so good but when I run clowder I get the error:

Uncaught ReferenceError: SpiderGL is not defined

related to presenter.js (which I believe is related to using const instead of var). However, if I refresh the browser a couple of times it eventually works!! When it works no errors show up in the console!

So, I'm trying to understand why this happens. Thanks again for all the help!

Upvotes: 0

Views: 1137

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371019

You can only use the ajax method when the endpoint doesn't have CORS restrictions. Most servers do have such restrictions, so ajax usually won't work.

If you can find a place where the library is hosted which doesn't have such restrictions, you'll be able to use ajax - for example, jsdelivr will permit it:

fetch('https://cdn.jsdelivr.net/npm/@snakesilk/[email protected]/dist/index.min.js')
  .then(res => res.text())
  .then(console.log);

Given the source code, you can then modify it client-side, and finally append the modified code as a <script> tag.

But that's really weird. It would make much more sense to fork the library, make the required modifications, and host the modified script on a server you control.

Upvotes: 3

Related Questions