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