javascript - 围绕 iframe 的 jQuery UI 对话框；性能问题？

Question

我正在围绕 iframe 元素制作一个 jQuery UI 对话框，这样做的性能受到严重影响。当您移动对话框太快导致鼠标经过 iframe 元素时会出现此问题，整个页面将暂停片刻并导致速度显着下降。我已经阅读了有关 iframe 捕获导致速度变慢的鼠标事件的信息，但我似乎无法确定确切的问题。我试图捕获 mousemove 和 mouseover 并防止默认行为，但没有成功。

任何使性能回到正轨的指示都将不胜感激!另请注意，我使用的是 Webkit，并不关心与其他浏览器的兼容性。

Answer 1

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

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

$(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 将随对话框调整大小，并且它相对于对话框容器和窗口定位。这可能需要更多的调整。理想情况下，您只需扩展对话框插件来处理这些选项。我很快就会这样做。

This post在 jQuery 论坛上为我提供了指向可拖动插件修复的指针。