Call External (Off-Site) Files from an External (On-Site) File

Hello,

I have a multi-page site that requires quite a bit of off-site JS files. I wish to call all of these files in an external file on my site that is accessed by all the pages so I can easily make site-wide changes if necessary. I think it might be better to show you want I mean:

What I Have:
HTML

<head>
	<script async src="https://www.googletagmanager.com/gtag/js?id=xxxxxxxxxxxxxxx"></script>
	<script>
  		window.dataLayer = window.dataLayer || [];
  		function gtag(){dataLayer.push(arguments);}
  		gtag('js', new Date());

  		gtag('config', 'xxxxxxxxxxxxxxxx');
	</script>

	<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
	<script>
	  window.OneSignal = window.OneSignal || [];
	  OneSignal.push(function() {
	    OneSignal.init({
	      appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
	    });
	  });
</script>
<script async src=https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxxx></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js></script>
<script src=res/script.js></script>
<script src=res/cookie.js defer></script><script>window.addEventListener(load,function(){window.wpcc.init({colors:{popup:{background:#222222,text:#ffffff,border:#b5e1a0},button:{background:#b5e1a0,text:#000000}},position:bottom-right,corners:small,padding:small,margin:large,transparency:5,content:{href:legal/cookie-policy,message:By using our site, you agree to our use of cookies. We use cookies to ensure that you have the best experience on our site!,link:View our Cookie Policy for Details,button:Understand!}})});</script>
</head>

For some reason the quotation mark (") is not showing in the code above, note that there are quotation marks, and the code does work.

What I Want:

HTML

<head>
    <script src="/js/load.js"></script>
</head>

load.js

Some sort of code here that can call the SRC attribute of the scripts

If there is a better way to do this (Like have an 0px by 0px iframe with the code) that would work will Google Analytics and other trackers, please let me know!

I am open to suggestions other that my idea above, so if you know (Or think) something else will work, please let me know.
Thanks!

Does anyone know if this is even possible?

Each <script> tag contains plain text that is written to conform to JavaScript standards.

Try opening a browser and viewing the JavaScript content usually by clicking on the script link. Copy and paste the raw JavaScript content into a new file and repeat for every script link. Save the file then call the file through new script tags.

The same goes for CSS files.

But that would have to be placed of my HTML page right? I want the scripts externally. (I know I could just delete the contents of the file, but see below.)

Also, a few of the scripts I am using say it is against their TOS to self-host the script.

Are there any other ways to do this?
Thanks

You’re loading jquery.
jquery has the ability to do this with the getscript function.

What you’re essentially trying to do is mimic a language like PHP’s include.

1 Like

Thanks! That worked for me!