Блог

Главная - Вопросы по программированию - диалоговое окно jquery не загружает iframe

диалоговое окно jquery не загружает iframe

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть этот код:

 <div id="dialog">
      <iframe id="myIframe" src=""></iframe>
    </div>

    <style>
      #myIframe{
        width: 100%;
        height: 100%;
      }
    </style>

function showModalSettings(id){
          alert(id);
          $("#dialog").dialog({
            autoOpen: false,
            show: "fade",
            hide: "fade",
            modal: true,
            open: function (ev, ui) {
              $('#myIframe').src = 'https://www.onet.pl';
            },
            height: '600',
            width: '800',
            resizable: true,
            title: 'Settings'
          });
          $('#dialog').dialog('open');
        }

showModalSettings(12);

Мне нужно открыть в диалоговом окне jqueryhttps://www.onet.pl (в iframe).
Текущий код показывает мне диалоговое окно правильно, но без onet.pl веб-сайт. Iframe пуст

как это исправить?

Ответ №1:

С помощью jQuery мы используем attr() метод для изменения атрибутов HTML-элемента.

Ваш код после исправления будет выглядеть следующим образом:

 function showModalSettings(id){
  alert(id);
  $("#dialog").dialog({
    autoOpen: false,
    show: "fade",
    hide: "fade",
    modal: true,
    open: function (ev, ui) {
      //$("#myIframe").src = "https://www.onet.pl";
      $("#myIframe").attr("src", "https://www.onet.pl");
    },
    height: '600',
    width: '800',
    resizable: true,
    title: 'Settings'
  });
  $('#dialog').dialog('open');
}

showModalSettings(12);  
 #myIframe{
  width: 100%;
  height: 100%;
}  
 <!DOCTYPE html>
<html>
  <head>
    <title>Hello, world!</title>
	  <meta charset="utf-8" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
    <div id="dialog">
      <iframe id="myIframe"></iframe>
    </div>
  </body>
</html>

Подробнее об этом attr() читайте по следующей ссылке: https://api.jquery.com/attr /

Примечание: в следующий раз, пожалуйста, покажите библиотеки или фреймворки, которые вы используете (например, jQuery UI в этом вопросе), это поможет любому, кто захочет ответить на ваш вопрос.