Загрузить iframe в bootstrap modal

Я хочу загрузить iframe в bootstrap modal и показать загрузчик перед загрузкой iframe. Я использую просто функцию jquery click, но она не работает. Я не понимаю, почему он не работает. fiddle полная страница fiddle

$('.btn').click(function() {
    $('.modal').on('show',function() {    
        $(this).find('iframe').attr('src','http://www.google.com')
    })
    $('.modal').modal({show:true})
    $('iframe').load(function() {
        $('.loading').hide();
    });
})

Ответы

Ответ 1

$('.modal').on('shown.bs.modal',function(){      //correct here use 'shown.bs.modal' event which comes in bootstrap3
  $(this).find('iframe').attr('src','http://www.google.com')
})

Как показано выше, используйте событие 'shown.bs.modal', которое входит в bootstrap 3.

РЕДАКТИРОВАТЬ: -

и просто попробуйте открыть другой URL-адрес iframe, кроме google.com, он не позволит вам открывать google.com из-за некоторых угроз безопасности.

Причиной этого является то, что Google отправляет заголовок ответа "X-Frame-Options: SAMEORIGIN". Этот параметр запрещает браузеру отображать iFrames, которые не размещены в том же домене, что и родительская страница.

Ответ 2

Событие Bootstrap для модальной загрузки было изменено в Bootstrap 3

просто используйте shown.bs.modal событие:

$('.modal').on('shown.bs.modal', function() {
    $(this).find('iframe').attr('src','http://www.google.com')
})

Дополнительно можно найти на мероприятии по ссылке ниже:

http://getbootstrap.com/javascript/

Ответ 3

Вы можете просто использовать этот помощник бутстрапа для диалогов (всего 5 кБ)

у него есть поддержка запроса ajax, iframes, общих диалогов, подтверждения и подсказки!

вы можете использовать его как:

eModal.iframe('http://someUrl.com', 'This is a tile for iframe', callbackIfNeeded);

eModal.alert('The message', 'This title');

eModal.ajax('/mypage.html', 'This is a ajax', callbackIfNeeded);

eModal.confirm('the question', 'The title', theMandatoryCallback);

eModal.prompt('Form question', 'This is a ajax', theMandatoryCallback);

это обеспечивает прогресс загрузки при загрузке iframe!

Не требуется html.

Вы можете использовать литерал объекта как параметр для дополнительных параметров.

Подробнее проверьте форму сайта.

лучше

Ответ 4

Я встретил эту реализацию в Codepen. Надеюсь, вы сочтете это полезным.

this.on('hidden.bs.modal', function(){
      $(this).find('iframe').html("").attr("src", "");
    });

Ответ 5

Кажется, что ваш

$(".modal").on('shown.bs.modal')   // One way Or

Вы можете сделать это несколько иначе, например

$('.btn').click(function(){
    // Send the src on click of button to the iframe. Which will make it load.
    $(".openifrmahere").find('iframe').attr("src","http://www.hf-dev.info");
    $('.modal').modal({show:true});
    // Hide the loading message
    $(".openifrmahere").find('iframe').load(function() {
        $('.loading').hide();
    });
})

Ответ 6

Я также хотел загрузить любой iframe внутри модального окна. То, что я сделал, - создал iframe внутри модала и передал источник целевого iframe в iframe внутри модала.

function closeModal() {
  $('#modalwindow').hide();
  var modalWindow = document.getElementById('iframeModalWindow');
  modalWindow.src = "";
}

.modal {
  z-index: 3;
  display: none;
  padding-top: 5%;
  padding-left: 5%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(51, 34, 34);
  background-color: rgba(0, 0, 0, 0.4)
}

<!-- Modal Window -->
<div id="modalwindow" class="modal">
  <div class="modal-header">
    <button type="button" style="margin-left:80%" class="close" onclick=closeModal()>&times;</button>
  </div>
  <iframe id="iframeModalWindow" height="80%" width="80%" src="" name="iframe_modal"></iframe>
</div>