围绕iframe的jQuery UI对话框; 性能问题？

Question

我正在围绕iframe元素创建一个jQuery UI对话框,这样做的性能受到严重影响.当您将对话框移动太快而导致鼠标移过iframe元素时会出现此问题,整个页面将暂停一段时间并导致显着减速.我已经读过iframe捕获鼠标事件导致速度减慢但我似乎无法确定确切的问题.我试图捕获mousemove和mouseover并防止默认行为,没有运气.

任何能使表演恢复正常的指针都将受到赞赏!另请注意,我使用的是Webkit,并不关心与其他浏览器的兼容性.

Answer 1

我自己刚刚遇到了这些性能问题。当拖动或调整对话框大小时，鼠标通常会越过 iframe。正如您所提到的，这些事件由 iframe 捕获，导致滞后行为。

jQuery draggable 提供了一个“ iframeFix ”选项，可以在拖动时在 iframe 上放置一个透明的 div。对话框插件不提供此修复。查看iframefix的jquery-ui 代码，我能够对其进行调整以解决对话框的性能问题。添加类似于您的对话框拖动和调整大小开始/停止选项的内容应该可以解决问题：

$(selector).dialog({
  dragStart: function (event, ui) {
      $('iframe', this).each(function() {
          $('<div class="ui-draggable-iframeFix" style="background: #FFF;"></div>')
          .css({
              width: '100%', height: '100%',
              position: 'absolute', opacity: '1', zIndex: 1000, overflowX: 'hidden'
          })
          .css($(this).position())
          .appendTo($(this).offsetParent());
      });
  },
  dragStop: function (event, ui) {
      $("div.ui-draggable-iframeFix").each(function() {
        this.parentNode.removeChild(this); }); //Remove frame helpers
      }
});

我已经修改了代码，因此透明 div 将随着对话框调整大小，并且它相对于对话框容器与窗口进行定位。这可能需要更多的调整。理想情况下，您只需扩展对话框插件来处理这些选项。我很快就会这样做。

jQuery 论坛上的这篇文章为我提供了指向可拖动插件修复的指针。