Jquery UI resizable - 调整放置在 iframe 上的 div 的大小答案

【问题标题】：Jquery UI resizable - resize a div placed over an iframeJquery UI resizable - 调整放置在 iframe 上的 div 的大小
【发布时间】：2012-11-08 12:45:27
【问题描述】：

如果您查看这个 jsbin：http://jsbin.com/efosed/5/edit 并按下“使用 JS 运行”，将会有一个可以使用 jquery ui 调整大小的 div。一切都按预期进行。 div 放置在“全屏”iframe 上。在链接示例中，此 iframe 具有：display: none。

如果我将它修改为display: block，然后重新运行脚本，reziable 插件会出现一些奇怪的行为。你可以在这里试试：http://jsbin.com/efosed/6/edit。它不会正确处理鼠标事件。可能是什么原因，我该如何解决？

【问题讨论】：

标签： javascript jquery css jquery-ui

【解决方案1】：

仅 CSS 方法

.ui-resizable-resize iframe { 指针事件：无； }

ui-resizable-resizing 类会在您调整大小时添加。

【讨论】：

【解决方案2】：

您必须实现自己的逻辑来修复 iframe。一种解决方案是在 iframe 上添加一个 div：

DEMO

$(function() {
  $('#resizable').resizable({
      start: function(event, ui) {
        $('<div class="ui-resizable-iframeFix" style="background: #fff;"></div>')
            .css({
                width:'100%', height: '100%',
                position: "absolute", opacity: "0.001", zIndex: 1000
           })
            .appendTo("body");
      },
    stop: function(event, ui) {
        $('.ui-resizable-iframeFix').remove()
      }
  });
});

对于支持CSS属性pointer-events的modern browsers，有更好的解决方案，见代码和jsbin：

DEMO

$(function() {
  $('#resizable').resizable({
      start: function(event, ui) {
        $('iframe').css('pointer-events','none');
         },
    stop: function(event, ui) {
        $('iframe').css('pointer-events','auto');
      }
  });
});

【讨论】：

你可以在较新的浏览器上不使用 js 来做到这一点。 .ui-resizable-resizing iframe{ pointer-events:none;}
@epelc 但是在这个例子中 iframe 不是可调整大小元素的后代，否则我想它会起作用
@A.Wolff 错过了那个。你说的对。而且我更错了，因为如果你有一个网格，我的就有一个错误。如果您正在调整大小的内容旁边有 iframe，它们也会破坏您的事件。

【解决方案3】：

你可以做得更简单：

Javascript

$(function() {
  $('#resizable').resizable({
      start: function(event, ui) {
        $(this).addClass('freeze')
      },
    stop: function(event, ui) {
        $(this).removeClass('freeze')
      }
  });
});

CSS

#resizable.freeze iframe { pointer-events: none; }

【讨论】：

好吧jQuery已经添加了一个类（ui-resizable-resizing），你自己不需要，因此不需要添加2个回调。