«Переключение источника iframe» работает локально, но не на сайте Github Pages - PullRequest
Новая
       30

«Переключение источника iframe» работает локально, но не на сайте Github Pages

0 голосов
/ 26 ноября 2018

Я пытаюсь использовать функцию, которая переключает ссылку на источник iframe на страницах Github.Это из здесь.

Источниками iframe являются эскизы p5.js, также размещенные на страницах Github.Вся страница (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();

И ссылка наGithub Page , где iframe пуст.

1 Ответ

0 голосов
/ 26 ноября 2018

Когда вы сталкиваетесь с подобными проблемами, ваш первый шаг должен всегда проверять инструменты разработчика , особенно консоль 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.

Быстрое решение этой проблемы - вместо этого переключите ваш URL JQuery на HTTPS.

Но в будущем проверьтеинструменты разработчика.

...