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

JavaScript
1

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!

2

Does anyone know if this is even possible?

3

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.

4

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

5

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
6

Thanks! That worked for me!

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.