'Switch iframe source' 在本地工作，但在 Github 页面站点上不工作

Question

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

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

Link 到 121templatetwo 回购：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。

Answer 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。

但以后请查看开发者工具。

'Switch iframe source' 在本地工作，但在 Github 页面站点上不工作

'Switch iframe source' works locally but not on Github Pages site

html

javascript

iframe

github-pages

p5.js