“切换 iframe 源”在本地工作，但不在 Github Pages 网站上答案

【问题标题】：'Switch iframe source' works locally but not on Github Pages site“切换 iframe 源”在本地工作，但不在 Github Pages 网站上
【发布时间】：2018-11-25 22:44:47
【问题描述】：

我正在尝试使用在 Github 页面上切换 iframe 源链接的功能。来自here.

iframe 源代码是 p5.js 草图，也托管在 Github 页面上。整个页面（121templatetwo）在本地工作，但是当推送到 Github Pages 时，iframe 是空的。

121templatetwo repo 链接：https://github.com/lilykdonaldson/121templatetwo

iframe 切换器的代码（也在 repo 中）：

var switcher$ = $('.switcher'),          // select element
    switchTarget$ = $('.switch-target'); // iframe

switcher$.on('change', switchIframeSrc); // event binding

// our functiono to switch the iframe src
function switchIframeSrc() {
  // set the 'src' attribute of the iframe
  // to the value of the selected option
  switchTarget$.attr('src', switcher$.val());
}

// call the method on load
switchIframeSrc();

以及 iframe 为空的 link to the Github Page。

【问题讨论】：

标签： javascript html iframe github-pages p5.js

【解决方案1】：

当您遇到此类问题时，您的第一步应该始终是检查您的developer tools，尤其是 JavaScript 控制台和网络选项卡。

这是您遇到的任何错误都会出现的地方。在您的情况下，您会遇到两个错误：

Mixed Content: The page at 'https://lilykdonaldson.github.io/121templatetwo/' was loaded over HTTPS, but requested an insecure script 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.

index.js:1 Uncaught ReferenceError: $ is not defined
    at index.js:1

因此，您的页面是通过 HTTPS 加载的，这意味着它无法通过 HTTP 加载脚本文件。这会阻止您加载 JQuery，这会破坏其他所有内容。这在本地有效，因为您可能是通过 file:// URL 加载的。

快速解决此问题的方法是将您的 JQuery URL 切换为 HTTPS。

但在未来，请查看开发者工具。

【讨论】：