跨浏览器窗口调整事件 – JavaScript / jQuery
攻击 Firefox, WebKit和Internet Explorer中的window resize事件的正确(现代)方法是什么?
你可以打开/closures两个滚动条?
jQuery有一个内置的方法 :
$(window).resize(function () { /* do something */ });
出于UI响应的考虑,您可能会考虑使用setTimeout仅在几毫秒之后调用您的代码,如以下示例所示,受此启发:
function doSomething() { alert("I'm done resizing for the moment"); }; var resizeTimer; $(window).resize(function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(doSomething, 100); });
$(window).bind('resize', function () { alert('resize'); });
下面是调入resize事件的非jQuery方法:
window.addEventListener('resize', function(event){ // do stuff here });
它适用于所有现代浏览器。 它不会为你节stream任何东西。 这是一个在行动中的例子 。
对不起,提出一个旧的线程,但如果有人不想使用jQuery,你可以使用这个:
function foo(){....}; window.onresize=foo;
既然你是开放的jQuery, 这个插件似乎是伎俩。
使用jQuery 1.9.1我刚刚发现,尽pipe在技术上相同)*,但这在IE10(但在Firefox中)中不起作用:
// did not work in IE10 $(function() { $(window).resize(CmsContent.adjustSize); });
而这在两个浏览器中工作:
// did work in IE10 $(function() { $(window).bind('resize', function() { CmsContent.adjustSize(); }; });
编辑:
)*正如Wraith Kenny和Henry Blyth的评论中所指出和解释的那样,其实在技术上并不相同。
jQuery
默认提供$(window).resize()
函数:
<script type="text/javascript"> // function for resize of div/span elements var $window = $( window ), $rightPanelData = $( '.rightPanelData' ) $leftPanelData = $( '.leftPanelData' ); //jQuery window resize call/event $window.resize(function resizeScreen() { // console.log('window is resizing'); // here I am resizing my div class height $rightPanelData.css( 'height', $window.height() - 166 ); $leftPanelData.css ( 'height', $window.height() - 236 ); }); </script>
我认为jQuery插件“jQueryresize事件”是最好的解决scheme,因为它负责限制事件,使其在所有浏览器中都一样。 它类似于安德鲁斯的回答,但更好,因为你可以钩住resize事件到特定的元素/select器以及整个窗口。 它为编写干净的代码开辟了新的可能性。
这个插件可以在这里find
如果您添加了很多侦听器,则会出现性能问题,但对于大多数使用情况而言,这是完美的。
我想你应该进一步控制这个:
var disableRes = false; var refreshWindow = function() { disableRes = false; location.reload(); } var resizeTimer; if (disableRes == false) { jQuery(window).resize(function() { disableRes = true; clearTimeout(resizeTimer); resizeTimer = setTimeout(refreshWindow, 1000); }); }
希望它能帮助jQuery
先定义一个函数,如果有一个现有函数跳到下一步。
function someFun() { //use your code }
浏览器resize使用像这样。
$(window).on('resize', function () { someFun(); //call your function. });
除了提到的窗口大小调整function之外,重要的是要明白,resize的事件如果不经过事件就会被触发。
保罗·爱尔兰人有一个很好的function,可以大大减轻重新调整的大小。 非常推荐使用。 作品跨浏览器。 在IE8testing它在前一天,一切都很好。
http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
一定要看看演示看看不同之处。
这是完整性的function。
(function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // usage: $(window).smartresize(function(){ // code that takes it easy... });