时间戳

首页 > 解决方案 > 在 codepen 中加载外部 .js (github) 库

html - 在 codepen 中加载外部 .js (github) 库

问题描述

来自 UX 设计师的新手问题已经尝试了 2 天。

我正在尝试在 codepen https://github.com/Matthew-Dove/Inject中测试 matthew dove 的注入脚本

我已经使用 jsdelivr 将原始 github 文件复制到 Pen 设置中。当我点击眼睛图标时，我可以看到 .js 文件。

设置图片

我已将 Matthew 提供的示例代码复制到 html 面板中。

在此处输入图像描述

但正如您在上图中看到的那样，网站并没有被注入。我的代码笔是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>

我尝试过调用和不调用 .js 库

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

任何帮助都将不胜感激。

标签： htmlgithubinjectcodepen

解决方案

当您通过 URL 在 CodePen 上添加脚本时，该 URL 将像以前一样被注入</body>。无需像这样显式添加脚本：

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

因为在那之后，CodePen 会自动添加另一个脚本：

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

但是由于另一个原因，该代码不起作用。这个问题甚至适用于 Matthew 的https://rawgit.com/Matthew-Dove/Inject/master/src/example.html示例，yahoo API ( https://query.yahooapis.com/v1/public/yql )引擎盖不再可用。https://twitter.com/ydn/status/1079785891558653952

不幸的是，您对此无能为力。

推荐阅读