Bootstrap Modal не открывается - загрузка по сценарию - PullRequest
Новая
       35

Bootstrap Modal не открывается - загрузка по сценарию

0 голосов
/ 25 сентября 2019

Я хочу открыть модал при нажатии на ссылку.Ссылка присутствует в контейнере / разделе, который создается с помощью тега script.

Я загружаю файлы jQuery, Popper и Bootstrap CSS & JS внутри script.js (он будет добавлен на сторонние сайты).Контейнер отображается с элементами, но модальное окно не открывается.

Page.html 

<body>   
... 
<script src="http://localhost:7000/" type="application/javascript"></script>
</body>

SCRIPT.JS (размещено на сервере экспресс)

Загрузить jQuery 

script.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js';
script.integrity = 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo';
script.crossOrigin = 'anonymous';
document.getElementsByTagName("head")[0].appendChild(script);

Добавление Bootstrap CSS 

script.rel = "stylesheet";
script.href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
script.integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T";
script.crossOrigin = "anonymous";
document.getElementsByTagName("head")[0].appendChild(script);

Добавление Popper и Bootstrap JS в Body (функции для загрузки соответствующих URL, целостности и crossOrigin) 

loadPopper('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js','sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1','anonymous');

loadBootstrap('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js','sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM','anonymous');

После этого ямой HTML содержит раздел со ссылкой.

Если я переместу только тег сценария jQuery в Page.html, модальное окно начнет открываться.

Page.html 

<body>
...
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="http://localhost:7000/" type="application/javascript"></script>
</body>

Я попытался загрузить jQuery в 'body' в файле script.js (как page.html выше), он не работал.

1 Ответ

1 голос
/ 25 сентября 2019

Когда я пытаюсь добавить их с атрибутами integrity и crossorigin, я получаю ошибку CORS для каждого.

Когда я удаляю атрибуты и просто указываю src / href sВроде работает: 

function addHeadTag(tag, options) {
  let item = document.createElement(tag);
  Object.assign(item, options, { async: false });
  document.querySelector("head").appendChild(item)
}

function avoidFouc() {
  document.body.style.opacity = 1;
}
addHeadTag('link', {
  rel: 'stylesheet',
  href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
  onload: avoidFouc
});
addHeadTag('script', {
  type: 'application/javascript',
  src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js'
});
addHeadTag('script', {
  type: 'application/javascript',
  src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'
});
addHeadTag('script', {
  type: 'application/javascript',
  src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'
});
body {
  opacity: 0;
  transition: opacity .2s ease-in-out;
}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Примечание: я не знаю достаточно о CORS, чтобы сказать вам, почему происходит сбой, когда integrity и crossorigin указаны для динамически добавляемыхтеги.

Но я заметил, что это работает без них.

Я также заметил, что этот метод вызывает FOUC , поэтому я добавил небольшую функцию, чтобы избежать этого (в основном скрывая document.body доЗагружен CSS Bootstrap).

РЕДАКТИРОВАТЬ: {async: false} добавлены к параметрам сценария, чтобы убедиться, что они загружаются в порядке их передачи.Должен быть удален, если порядок загрузки не имеет значения, чтобы улучшить время загрузки страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...