Question

我在DIV中嵌入了一个IFrame源（JQuery-UI Datepicker）。当用户在iframe中单击以选择日期时，iframe应在宽度和高度上增长以适应datepicker-calender的高度。完成日期选择后，IFrame应恢复原始大小。

JSFiddle：https://jsfiddle.net/Jersey_Guy/yoc9jewv/

$(document).ready(function() {
    //debugger;
    var $w = $(window),
      $dateframe = $("iframe[src*='jqueryui']");

    $dateframe.blur(function() {
      console.log("Called Resize");
      $(this).width = 100;
      $(this).height = 100;
    }).resize();

    $dateframe.click(function() {
      console.log("Called Resize");
      $(this).width(200);
      $(this).height(400);
    }).resize();

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-zone tab-widget tabZoneSelected tabSuppressVizTooltipsAndOverlays tabZone-web fade-bg" id="tabZoneId1" style="z-index: 17; background-color: rgba(255, 255, 255, 0); width: 474px; height: 127px; top: 5px; left: 3px;">
  Outer Div
  <div class="tab-web tab-widget fade-in">
    Inner Div
    <div style="position: absolute;">
      IFrame Floater Div
      <iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html" style="border: 0px none; width: 200px; height: 80px; top: 0px; left: 0px;">

      </iframe>
      End IFrame Div
    </div>
    End Inner Div
  </div>
  End Outer Div
</div>

我是否需要设置div大小和IFrame大小？我哪里错了？

Answer 1

我认为你可以通过处理div而不是iframe来做到这一点。我在这里修改了你的小提琴：https://jsfiddle.net/bkelley13/faLeucpp/1/

 var dateframe = $("#myframediv");

  $(document).click(function() {            
    dateframe.width(100);
    dateframe.height(50);
    dateframe.resize();
});

dateframe.click(function(ev) {    
  $(this).width(400);
  $(this).height(200);
  ev.stopPropagation();
}).resize();

和

    <div id="myframediv" style="background-color:yellow">
  IFrame Floater Div
  <iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html">
  </iframe>

因此，如果您单击iframe div，它会调整大小，如果您在其外部单击，则会调整大小。（我不知道目标jqueryui页面，datepicker似乎没有冒出点击事件。）

Answer 2

解决了！没有触发的点击和模糊功能是问题所在。不得不使用mousenter和mouseleave以及jquery animate函数来使iframe扩展和收缩。

这是我的代码：https://jsfiddle.net/Jersey_Guy/4zja94j4/

＆＃13;

$(document).ready(function() {
  //debugger;
  var $w = $(window),
    $dateIframe = $("iframe[src*='jqueryui']"),
    $dateInnerDiv = $("#myframediv");

  $dateIframe.mouseleave(function() {
    console.log("Called Iframe Reduce");
    $(this).animate({
      width: "190px",
      height: "90px"
    }, 500);
    //Optional: slow down the exit to 500 ms in case user changes their mind
  });

  $dateIframe.mouseenter(function() {
    console.log("Called Iframe increase");
    $(this).animate({
      width: "390px",
      height: "290px"
    }, 0);
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-zone tab-widget tabZoneSelected tabSuppressVizTooltipsAndOverlays tabZone-web fade-bg" id="tabZoneId1" style="z-index: 17; background-color:white; width: 500px; height: 300px; top: 5px; left: 3px;">
  Outer Div
  <div class="tab-web tab-widget fade-in" style="background-color:gray;">
    Inner Div
    <div id="myframediv" style="position: absolute; background-color:yellow;">
      IFrame Floater Div <a href="before">before</a>
      <iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html" style="border: 0px none; width: 190px; height: 90px; top: 0px; left: 0px;  background-color:orange;">

      </iframe> End IFrame Div <a href="after">after</a>
    </div>
    End Inner Div
  </div>
  End Outer Div
</div>

＆＃13;

如何在用户点击内部时自动展开DIV元素中的IFrame？

2 个答案: