jQuery UI可调整大小-调整放置在iframe上的div的大小

Question

如果您签出以下jsbin： http ：//jsbin.com/efosed/5/edit，然后按“ Run with JS”，那么将有一个div，可以使用jQuery ui调整其大小。 一切正常。 div放置在“全屏” iframe上。 在链接的示例中，此iframe具有： display: none 。

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

Answer 1

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

演示

$(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 现代浏览器 ，有更好的解决方案，请参见代码和jsbin：

演示

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

Answer 2

您可以做得更简单：

Java脚本

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

的CSS

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

Answer 3

仅CSS方法

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

每次调整大小时，都会添加ui-resizable-resizing类。