圍繞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論壇上的這篇文章為我提供了可拖動插件修復的指針。