Search code examples
htmlgithubinjectcodepen

Loading external .js (github) libraries in in codepen

Newbie question from a UX designer been trying to get this working for 2 days now.

I am trying to test out matthew dove's inject script in codepen https://github.com/Matthew-Dove/Inject

I have copied the raw github file using jsdelivr into the Pen settings. When I click on the eye icon I can see the .js file.

settings picture

I have copied the example code provided by Matthew into the html panel.

enter image description here

But as you can see in the image above the website does not get injected. My codepen is https://codepen.io/lisatw/pen/oNXxgMR 

<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1,width=device-width" name="viewport">
<title>Inject</title>
</head>
<body>
<h4>Below this heading the world's first website will be injected</h4>

<div data-inject-src="http://info.cern.ch/" style="height: 175px;"> </div>

<h4>Above this heading the world's first website will be injected</h4>


</body>
</html>

I have tried with and without the call to the .js library

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

Any help mightly appreciated.

Solution

  • 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.