7

如果您查看这个 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。它不会正确处理鼠标事件。可能是什么原因，我该如何解决？

4

3 回答 3

31

您必须实现自己的逻辑来修复 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');
      }
  });
});
于 2012-11-20T12:49:23.113 回答
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; }
于 2014-04-03T12:06:34.827 回答
0

仅 CSS 方法

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

ui-resizable-resizing每当您调整某些东西的大小时，都会添加该类。

于 2016-08-24T19:11:21.000 回答