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

我围绕iframe元素制作了一个jQuery UI对话框，并且这样做的性能受到严重影响。当您将对话框移动得太快而导致您的鼠标移过iframe元素时，会出现此问题，整个页面会暂时挂起并导致显着减速。我已阅读了有关iframe捕获鼠标事件，导致减速，但我似乎无法确定确切的问题。我试图捕获mousemove和mouseover，并防止默认行为，没有运气。围绕iframe的jQuery UI对话框;性能问题？

任何指针让性能回到正轨，将不胜感激！另请注意，我使用的是Webkit，并不在乎与其他浏览器的兼容性。

来源

2011-08-22 Roel van Uden

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

jQuery draggable提供了一个“iframeFix”选项，该选项在拖动时放置透明的div覆盖iframe。对话框插件不提供此修复程序。查看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将对话框调整，它是相对于对话框容器VS定位。窗户。这可能需要更多的调整。理想情况下，您只需扩展对话框插件即可处理这些选项。我很快就会这样做。

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

来源

2011-11-11 01:26:10 mcanfield

我不得不使用resizeStart和resizeStop，但现在它工作：我可以顺利地调整我的模态对话框。谢谢你，你的解决方案是优雅的，完美的作品。 – Germstorm

伟大的帮助和非常好的解决方案麦克菲尔德。由于iframe，我确实看到了性能和紧张问题。 +1 我的情况我第一次尝试你的解决方案，但你提供的链接也帮助了我，问题已经解决了一个简单的 - iframeFix：true –

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

回答

相关问题