我正在围绕 iframe 元素制作一个 jQuery UI 对话框,这样做的性能受到严重影响。当您移动对话框太快导致鼠标经过 iframe 元素时会出现此问题,整个页面将暂停片刻并导致速度显着下降。我已经阅读了有关 iframe 捕获导致速度变慢的鼠标事件的信息,但我似乎无法确定确切的问题。我试图捕获 mousemove 和 mouseover 并防止默认行为,但没有成功。
任何使性能回到正轨的指示都将不胜感激! 另请注意,我使用的是 Webkit,并不关心与其他浏览器的兼容性。
最佳答案
我自己也遇到了这些性能问题。拖动对话框或调整对话框大小时,鼠标通常会越过 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 论坛上为我提供了指向可拖动插件修复的指针。
关于javascript - 围绕 iframe 的 jQuery UI 对话框;性能问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7145317/