在 codepen 中加载外部 .js (github) 库答案

【问题标题】：Loading external .js (github) libraries in in codepen在 codepen 中加载外部 .js (github) 库
【发布时间】：2020-02-15 16:37:52
【问题描述】：

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

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

我已使用 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>

任何帮助都将不胜感激。

【问题讨论】：

标签： html github inject codepen

【解决方案1】：

当您通过 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

很遗憾，您对此无能为力。

【讨论】：

哦，你的明星......至少我可以停止认为我非常愚蠢！
从原始存储库中检查了替代品，它们也不起作用。我将尝试编写另一个替代脚本，我希望这次它可以工作。但我不知道还有这样的服务。
是的，我也试过了。我确实在堆栈溢出时找到了这个：stackoverflow.com/questions/54046823/…
事实证明，向另一台服务器发出请求并非易事。这就是他们使用代理服务器绕过 CORS 策略的原因，出于安全原因，该浏览器经常使用该策略。一些服务器作为响应发送 Access-Control-Allow-Origin 标头（这有帮助），而另一些则不发送（例如可能是旧的）。 stackoverflow.com/questions/20035101/…
有两个选项，您可以简单地使用 iframe 来显示网站，而无需对其进行任何控制。或者您需要使用自己的服务器向资源发出请求，然后将其作为 HTML 发送回您的站点。第三方代理服务器不可靠，可以随时禁用（如 yahoo API）。