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

Question

如果你查看这个jsbin:http://jsbin.com/efosed/5/edit 并按"Run with JS",将会有一个可以使用jquery ui调整大小的div.一切都像预期的那样.div被放置在"全屏"iframe上.在链接的示例中,此iframe具有:display: none.

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

Answer 1

你必须实现自己的逻辑来修复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,有一个更好的解决方案,请参阅代码和jsbin:

DEMO

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