Я запускаю динамическое c HTML содержимое в iframe и хотел бы вставить Bootstrap компоненты (кнопки и всплывающие окна). Содержимое HTML дано в виде текста, у меня есть полный контроль над ним.
Вот фрагмент кода, который не будет работать, он предполагает, что bootstrap, popper и jquery находятся в области видимости, что в iframe дело обстоит иначе:
<button type="button" class="btn btn-danger" data-toggle="popover" title="title" data-content="content">toggle</button>
<iframe srcDoc='
<button type="button" class="btn btn-danger" data-toggle="popover" title="title" data-content="content">toggle</button>
'></iframe>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
Это не работает, потому что в iframe нет ни css, ни javascript необходимых для отображения bootstrap компонентов. По сути, мой вопрос о том, как правильно добавить их в iframe. Есть много связанных вопросов, таких как:
Так что исправление кажется довольно простым, я просто добавляю необходимые таблицы стилей и скрипты в iframe. Быстрый запуск bootstrap перечисляет их . И сценарий, который вызывает popover(), также необходимо добавить в iframe.
При таком импорте код становится довольно длинным. Но вот скрипка, где вы можете поиграть с ней. И выглядит хорошо, черный прямоугольник - это граница iframe. Обе кнопки нажимаются и отображают всплывающее окно:
Теперь моя проблема заключается в том, что я не могу использовать CDN для ссылки на код. Это для PWA, который должен работать в автономном режиме, весь код должен быть связан.
Я установил bootstrap, popper. js и jquery с npm. В моей кодовой базе (машинописный текст) я импортирую их следующим образом:
import $ from "jquery";
import "popper.js";
import "bootstrap";
(window as any).jQuery = $;
Это работает для моего веб-сайта, но не влияет на код внутри iframe.
Как я могу решить и вставьте необходимые Javascript и CSS в iframe, не обращаясь ни к чему, что размещено в Интернете?