Bootstrap modal event "shown.bs.modal" не срабатывает при объявлении в iframe

Question

Ik создала и инициализировала модальность Bootstrap в родительском документе, а событие "показало.bs.modal" объявлено в iframe on документ готов. Документы parent и iframe находятся в одном домене. Проблема в том, что это событие не срабатывает при открытии модального файла. Любые идеи, почему это не работает?

Модальные HTML в вышестоящем документе:

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"><h4>Title</h4></div> 
      <div class="modal-body"></div> 
      <div class="modal-footer"></div> 
     </div> 
    </div> 
</div> 

JQuery в вышестоящем документе:

$(document).ready(function(){ 
    $('.modalTrigger').on('click.openModal', function(e){ 

     e.preventDefault(); 

     var trigger = $(this); 
     var modal = top.$('#modal'); 

     modal.modal('show'); 
    }); 
}); 

JQuery в IFRAME:

$(document).ready(function(){ 
    var modal = $('#modal', window.top.document); // Selects the right element in the parent window 
    modal.on('shown.bs.modal', function(e) { 
     console.log('test'); // Doesn't fire 
    }); 
}); 

Я использую JQuery 1.11.2 и Bootstrap 3.

Answer 1

Whe n он приходит к iframes, вы в основном взаимодействуете с двумя разными страницами (возможно, из двух разных доменов). Поэтому, когда вы запускаете событие в iframe, оно запускает событие только в этом iframe, а не в основном документе. Причина, по которой он не работает, может быть вызван тем, что браузер не позволяет этого.

Работа должна состоять в использовании Jquery postMessage, которая позволяет вам связываться с двумя страницами. Таким образом, в основном, что вам нужно сделать, это когда в главном документе запускается событие, отправьте postMessage в iframe. Получите postMessage в iframe, а затем покажите модель в iframe.

Вы должны проверить этот пример из: http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

Edit/Update:

Другой способ сделать это с помощью getScript вместо использования IFRAME. Код будет идти-то вроде этого:

$(document).ready(function(){ 
    $('.modalTrigger').on('click.openModal', function(e){ 

    e.preventDefault(); 

    var trigger = $(this); 
    var modal = top.$('#modal'); 
    $.getScript("test.js",function(){ 
     modal.modal('show'); 
    }); 
    }); 
}); 

Test.js

var modal = $('#modal', window.top.document); 
console.log('test');// Write a event you want to keep on the modal 

Переход к этому подходу, вы могли бы для того чтобы достигнуть функциональные возможности, которые вы хотите (с учетом замечаний). Когда вы нажимаете кнопку, которая запускает модальную, она вызывается $ .getScript и выполняет набор команд (может использоваться для создания событий добавления). После того, как он будет успешно выполнен, он покажет модель с обновленными событиями.