当用户在其中单击时，如何在 DIV 元素中自动展开 IFrame？

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

解决了！未触发的点击和模糊功能是问题所在。必须使用 mouseenter 和 mouseleave 以及 jquery animate 函数来使 iframe 扩展和收缩。

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

$(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);
  });

});

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