Link and Execute External JavaScript File Hosted on Github

Link and execute external JavaScript file hosted on GitHub

There is a good workaround for this, now, by using jsdelivr.net.

Steps:

Find your link on GitHub, and click to the "Raw" version.
Copy the URL.
Change raw.githubusercontent.com to cdn.jsdelivr.net
Insert /gh/ before your username.
Remove the branch name.
(Optional) Insert the version you want to link to, as @version (if you do not do this, you will get the latest - which may cause long-term caching)

Examples:

http://raw.githubusercontent.com/<username>/<repo>/<branch>/path/to/file.js

Use this URL to get the latest version:

http://cdn.jsdelivr.net/gh/<username>/<repo>/path/to/file.js

Use this URL to get a specific version or commit hash:

http://cdn.jsdelivr.net/gh/<username>/<repo>@<version or hash>/path/to/file.js

For production environments, consider targeting a specific tag or commit-hash rather than the branch. Using the latest link may result in long-term caching of the file, causing your link to not be updated as you push new versions. Linking to a file by commit-hash or tag makes the link unique to version.

Why is this needed?

In 2013, GitHub started using X-Content-Type-Options: nosniff, which instructs more modern browsers to enforce strict MIME type checking. It then returns the raw files in a MIME type returned by the server, preventing the browser from using the file as-intended (if the browser honors the setting).

For background on this topic, please refer to this discussion thread.

Including JavaScript files from GitHub into HTML pages

You will be able to do it with a URL similar to this:

https://rawgit.com/h5bp/html5-boilerplate/master/src/js/plugins.js

Note that this is not the same as clicking on the "raw" button within GitHub;
that button will also give you a clean version of the file, but it will be sent
with the wrong headers.

A Word of warning; the file is not not being served from GitHub. It is being
redirected through the rawgit.com domain. As is stated on https://rawgit.com:

Hey! rawgit.com is just for fun and is not associated with GitHub in any
way.

Keep in mind that the owner of that domain is now in control of the traffic and
is able to manipulate it as they see fit.

Raw Github js file not loading (direct link) like CDN

Technically speaking, GitHub doesn't allow source code to be accessed from their site like a CDN, however from This StackOverflow Question, there is a workaround. I wouldn't recommend using it, but you can use "https://cdn.jsdelivr.net/gh/" to get your script to work (from user @anayarojo on StackOverflow).

The url in your case would look like this:

https://cdn.jsdelivr.net/gh/McJoe21/coderslib/index.js

The pattern for the URL is:
https://cdn.jsdelivr.net/gh/<username>/<repository>/<file>

Javascript file not working on github pages

Try this

<script src="script.js" type="text/javascript"></script>

Use closing script tag.

For more check this answer.

How do I link to a javascript code I'm working on with git?

Here's the solution I'm looking for: codepen.io.

Codepen lets you work on a JS file in-browser and in a sandbox, then use a direct link to that file that another site can use. This is perfect for me, because the site I need to embed the JS in isn't serving millions of visitors.

Is it possible to load javascript code on your HTML file on GitHub pages?

Your code.js is there and it's loaded. What you are doing wrong is that you are loading that script in head tag so it executes before the body is loaded and that produces that error.

To solve it you can move the script under closing body tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Life</title>
</head>
<body bgcolor="#14FFB0">
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>
</body>
<script src="code.js"></script>
</html>

Or you can keep the script tag where is it and you can load the function onLoad

function runOnLoad() {
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.clearRect(0,0,800,600);
   ctx.fillStyle = "red";
   ctx.fillRect(10,10,100,100);
}

And in html just update body tag

<body bgcolor="#14FFB0" onload="runOnLoad()">

Hotlink resources like JavaScript files directly from GitHub

Yes, Github changed this in April, 2013:

We added the X-Content-Type-Options: nosniff header to our raw URL responses way back in 2011 as a first step in combating hotlinking. This has the effect of forcing the browser to treat content in accordance with the Content-Type header. That means that when we set Content-Type: text/plain for raw views of files, the browser will refuse to treat that file as JavaScript or CSS.

But thanks to http://combinatronics.com/ we can include GH scripts. The only change is from raw.github.com that becomes combinatronics.com:

<script
   type="text/javascript"
   src="https://combinatronics.com/username/repo/master/src/file.js"
></script>

The project is hosted on Github being open-source.

And yes, @Lix is correct. The files are not being served from Github but from combinatronics.

Another workaround I found is that instead of:

<script
   type="text/javascript"
   src="https://combinatronics.com/username/repo/master/src/file.js"
></script>

you can use $.getScript jQuery function:

<script>
  $.getScript("https://combinatronics.com/username/repo/master/src/file.js", function () {
    /* do something when loaded */
  });
</script>

Loading external .js (github) libraries in in codepen

When you add a script on CodePen by URL, this URL will be injected as is before </body>. There is no need to explicitly adding script like this:

<script src="./inject.js"></script>

Because right after that, CodePen automatically adds another script:

<script src="https://cdn.jsdelivr.net/gh/Matthew-Dove/Inject@master/src/inject.js"></script>

But the code doesn't work for another reason. This issue applies even to Matthew's https://rawgit.com/Matthew-Dove/Inject/master/src/example.html example, yahoo APIs (https://query.yahooapis.com/v1/public/yql) under the hood no longer available. https://twitter.com/ydn/status/1079785891558653952

Unfortunately, there is nothing you can do about it.

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

You can use the jQuery "Get Script" command, like this:

In the HTML file:

//Calls jQuery
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
//Calls external js file
    <script src="/header.js"></script>

header.js:

//Example 1:


$.getScript( "https://cdn.onesignal.com/sdks/OneSignalSDK.js" )
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "c4419c4b-c4d5-4238-ba9c-d19a533845f0",
});
});



//Example 2:

$.getScript( "https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxxx" )

Link and Execute External JavaScript File Hosted on Github