Stop a function, in an external JS file, from executing?

Question

I am including an external JS file, which has some code that I need to run after a particular thing happens (after contact form is submitted).

The external file has a function but also calls the function. This isn't much of a pain if it was OK to run that function on page load, but I need to run its function after a form is submitted. My form is submitted via AJAX, so I need to run the external file's function after the form has submitted, only.

How can I do this?

Here's an illustration to help...

MY SITE'S FOOTER:

    <script type="text/javascript">
       var a_variable = 12345;
    </script>
    <script src="//domain.com/external.js" type="text/javascript"></script>
  </body>
</html>

CONTENTS OF EXTERNAL.JS:

function doThis(){
   alert(window.a_variable);
}
doThis();

But I only want to run doThis() at a time that I want, not on page load.

Can I stop doThis(); from executing until I explicitly tell it to?

NOTE: I have already tried including external.js by creating a script tag (in javascript) and loading it that way, but the function in external.js needs to write to my users' browser, to which the users' browser says Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.. After that, I looked into the solutions in this answer, but it did not solve the problem. So, I am looking for a way to stop doThis() from executing.

I dont understand, just call it when you need it ?. Not right after the declaration of that said function. — WilomGfx, Apr 27 '17 at 17:42
Can't just copy the `external.js` file to your server and modify it? — XCS, Apr 27 '17 at 17:44
What is the actual content of external.js? Sounds like it has a `document.write()` call in it? Perhaps it's an ad vendor's script? Most of the big ad vendors allow for asynchronous use nowadays. For example [Google Analytics has an async mode](https://developers.google.com/analytics/devguides/collection/gajs/#how-the-asynchronous-syntax-works). Because there's not way to stop a function in an external file from executing. — Heretic Monkey, Apr 27 '17 at 17:48
You could use the XMLHttpRequest API to load the script, then manipulate the response text and eventually `eval` it... — Erich Kitzmueller, Apr 27 '17 at 18:08

score 0 · Answer 1 · answered Apr 27 '17 at 18:01

Can you edit the external.js file? If so you should just remove the doThis() line and add a listener to call the function on window load like so:

function doThis(){
   alert(window.a_variable);
}
window.onload = doThis;

If you cannot edit the JavaScript file you are a bit stuck. You could try to rewrite it and just include it locally, following the above pattern (since you can pull the file I assume you have access to the source and could easily download the file and edit it). I would suggest this course of action.

If you really need it to be pulled from that specific source and cannot edit the file, you can look into something like require.js. This will allow you to load a JavaScript file from within other JavaScript code, so you can wait for the document to load before including it. So your html could be:

<html>
    <body>
        <script type="text/javascript">
           var a_variable = 12345;
           window.onload = function() {
              require(["//domain.com/external.js"], function() {
                  console.log("loaded!");
              });
           }
        </script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script>
    </body>
</html>

Stop a function, in an external JS file, from executing?

1 Answers1