Question

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

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

Answer 1

我自己就遇到了这些性能问题。拖动或调整对话框大小时，鼠标通常会遍历iframe。正如您所提到的那样，iframe会捕获这些事件，导致延迟行为。

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

$(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论坛上的

This post为我提供了可拖动插件修复的指针。

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

1 个答案: