Question

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

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

链接到121templatetwo仓库：https://github.com/lilykdonaldson/121templatetwo

iframe切换器的代码（也在存储库中）：

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。

但是将来，请查看开发人员工具。

“切换iframe源”在本地有效，但在Github Pages网站上无效

1 个答案: