Question

我有此代码：

<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);

我需要在jquery对话框https://www.onet.pl中打开（在iframe中）。当前代码正确显示了该对话框-但没有onet.pl网站。 iframe为空

如何解决？

Answer 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），无论想回答您的问题的人都会有帮助。

jQuery对话框无法加载iframe

1 个答案: