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

Question

我在 DIV 中嵌入了一个 IFrame 源 (JQuery-UI Datepicker)。当用户在 iframe 中单击以选择日期时，iframe 的宽度和高度应增加以适应日期选择器日历的高度。日期选择完成后，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 来做到这一点。 我在这里修改了你的 fiddle :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 似乎没有冒泡点击事件。)