CODEWITHSUNDEEP
htmlgithubinjectcodepen
Lisa Tweedie
Lisa Tweedie

Reputation: 103

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.

Upvotes: 0

Views: 505

Answers (1)

artanik
artanik

Reputation: 2704

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.

Upvotes: 2

Related Questions