Имеет ли iFrame какие-либо события, подходящие для того, когда JavaScript и HTML-страницы встроены в модальные (Bootstrap)

Question

привет, я разрабатываю приложение Boostrap. Я хотел показать модальную форму, которая загружает отдельную страницу с помощью тегов iframe. модальный HTML, который загружает IFRAME в дополнение к названию и тело выглядит так

модальный HTML выглядит следующим образом

<!-- the modal form is described on the following HTML --> 
    <div id="myModal" class="modal fade"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
      <p>One fine body…</p> 
      </div> 
      <iframe src="path/radar.html"></iframe> 

      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

Это работает! Проверено.

но HTML я тусклый, чтобы загрузить имеет JavaScript, который работает на window.onload там работает несколько линий, чтобы нарисовать диаграмму, используя chart.js здесь является сценарий:

<script> 
    var radarChartData = { 
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], 
    datasets: [{ 
    label: "My First dataset", 
    fillColor: "rgba(220,220,220,0.2)", 
    strokeColor: "rgba(220,220,220,1)", 
    pointColor: "rgba(220,220,220,1)", 
    pointStrokeColor: "#fff", 
    pointHighlightFill: "#fff", 
    pointHighlightStroke: "rgba(220,220,220,1)", 
    data: [65,59,90,81,56,55,40] 
    },{ 
    label: "My Second dataset", 
    fillColor: "rgba(151,187,205,0.2)", 
    strokeColor: "rgba(151,187,205,1)", 
    pointColor: "rgba(151,187,205,1)", 
    pointStrokeColor: "#fff", 
    pointHighlightFill: "#fff", 
    pointHighlightStroke: "rgba(151,187,205,1)", 
    data: [28,48,40,19,96,27,100]}]}; 
    window.onload = function(){ 
    window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{responsive: true});} 
    </script> 

есть любым способом (т. е. событие & placehlder для iframe) для запуска двух строк кода, когда модаль показан с помощью кнопки относительно относительно окна?

Answer 1

Да, вы можете это сделать, надеясь, что у вас встроенная библиотека jQuery, поскольку вы используете бутстрап, вы должны включить библиотеку скриптов jQuery на странице (использование jQuery более стандартизировано и наилучшим образом подходит).

Допустим, вы открываете модель от кнопки с идентификатором = «btnShowModal», с помощью JQuery вы можете запустить функцию при нажатии кнопки, как показано ниже:

$("#btnShowModal").click(function(){ 
    //here you can add the code what ever you want to execute on button 
    window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{responsive: true}); 
});