Загрузка внешних библиотек .js (github) в codepen

Вопрос новичка от дизайнера UX, который пытается заставить это работать уже 2 дня.

Я пытаюсь протестировать сценарий ввода Мэтью Дава в codepen https://github.com/Matthew-Dove/Inject

Я скопировал необработанный файл github с помощью jsdelivr в настройки пера. Когда я нажимаю на значок глаза, я вижу файл .js.

картинка настроек

Я скопировал код примера, предоставленный Мэтью, в панель html.

введите здесь описание изображения

Но, как вы можете видеть на изображении выше, веб-сайт не внедряется. Мой codepen: 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>

Любая помощь может быть оценена.


person Lisa Tweedie    schedule 15.02.2020    source источник


Ответы (1)


Когда вы добавляете скрипт на CodePen по URL-адресу, этот URL-адрес будет внедрен как до </body>. Нет необходимости явно добавлять скрипт следующим образом:

<script src="./inject.js"></script>

Потому что сразу после этого CodePen автоматически добавляет еще один скрипт:

<script src="https://cdn.jsdelivr.net/gh/Matthew-Dove/Inject@master/src/inject.js"></script>

Но код не работает по другой причине. Эта проблема касается даже https://rawgit.com/Matthew-Dove/Inject/master/src/example.html, API Yahoo (https://query.yahooapis.com/v1/public/yql) под капотом больше не доступен. https://twitter.com/ydn/status/1079785891558653952

К сожалению, вы ничего не можете с этим поделать.

person artanik    schedule 15.02.2020
comment
Ах ты звезда... по крайней мере, я могу перестать думать, что веду себя невероятно глупо! - person Lisa Tweedie; 15.02.2020
comment
Проверил альтернативы из исходного репозитория, и они тоже не работают. Попробую написать другой альтернативный скрипт, надеюсь в этот раз получится. Но другого такого сервиса я не знаю. - person artanik; 15.02.2020
comment
Да я их тоже пробовал. Я нашел это при переполнении стека: stackoverflow.com/questions/54046823/ - person Lisa Tweedie; 15.02.2020
comment
Также альтернатива импорта контента github.com/AndersDJohnson/html-imports-content Имеет этот caniuse.com/#feat=imports - там написано Устаревший метод включения и повторного использования HTML-документов в других HTML-документах. Заменены модулями ES - person Lisa Tweedie; 15.02.2020
comment
Оказалось, что сделать запрос на другой сервер непросто. Вот почему они использовали прокси-сервер для обхода политики CORS, которую браузер часто использует из соображений безопасности. Некоторые серверы в ответ отправляют заголовок Access-Control-Allow-Origin (что помогает), а некоторые нет (например, старый). stackoverflow.com/questions/20035101/ - person artanik; 15.02.2020
comment
Есть два варианта, вы можете просто использовать iframe для отображения сайта без какого-либо контроля над ним. Или вам нужно использовать свой собственный сервер, чтобы сделать запрос к ресурсу, а затем отправить его обратно на ваш сайт в виде HTML. Сторонние прокси-серверы ненадежны и могут быть отключены в любое время (например, API Yahoo). - person artanik; 15.02.2020
comment
Я предположил, что это было из-за проблем с безопасностью, когда проблемы с межсайтовыми сценариями стали такой проблемой в наши дни. Я не думаю, что iframe не будет работать, потому что я хочу изменить стиль внедренного сайта. Мое требование изначально предназначено для внутреннего использования, поэтому я могу сделать что-то на стороне сервера, но я надеялся, что его можно будет использовать более широко, поэтому я искал решение на стороне клиента. Другой способ сделать то, что я хочу, — использовать расширение для браузера или набор букмарклетов. Большое спасибо за проверку. . - person Lisa Tweedie; 16.02.2020