使用Firefox,WebKit和Internet Explorer 的窗口调整大小事件的正确(现代)方法是什么?
并且可以打开/关闭两个滚动条吗?
window.dispatchEvent(new Event('resize'));
stackoverflow.com/questions/1818474/...
使用Firefox,WebKit和Internet Explorer 的窗口调整大小事件的正确(现代)方法是什么?
并且可以打开/关闭两个滚动条吗?
window.dispatchEvent(new Event('resize'));
stackoverflow.com/questions/1818474/...
Answers:
jQuery 为此提供了一个内置方法:
$(window).resize(function () { /* do something */ });
对于用户界面的响应起见,你可以考虑使用的setTimeout只有经过数毫秒打电话给你的代码,如下面的例子,启发这样:
function doSomething() {
alert("I'm done resizing for the moment");
};
var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
});
$('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })
$(window).bind('resize', function () {
alert('resize');
});
这是利用jQuery调整大小事件的非jQuery方法:
window.addEventListener('resize', function(event){
// do stuff here
});
它适用于所有现代浏览器。它不是油门东西给你。这是一个实际的例子。
抱歉,调出一个旧线程,但是如果有人不想使用jQuery,则可以使用以下方法:
function foo(){....};
window.onresize=foo;
使用jQuery 1.9.1,我刚刚发现,尽管在技术上完全相同)*,但在IE10中却不起作用(但在Firefox中):
// did not work in IE10
$(function() {
$(window).resize(CmsContent.adjustSize);
});
虽然这在两种浏览器中都有效:
// did work in IE10
$(function() {
$(window).bind('resize', function() {
CmsContent.adjustSize();
};
});
编辑:
)*实际上在技术上并不相同,正如WraithKenny和Henry Blyth的评论中所指出和解释的那样。
.resize()
要.bind('resize')
添加匿名函数还是要添加匿名函数?我想是第二个。)
adjustSize
方法将失去其的上下文this
,而第二种调用将CmsContent.adjustSize()
保留this
,即this === CmsContent
。如果方法中CmsContent
需要实例adjustSize
,则第一种情况将失败。第二种情况适用于所有类型的函数调用,因此建议始终传递匿名函数。
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>
我认为您应该对此进行进一步的控制:
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);
});
}
除了提到的窗口调整大小功能外,重要的是要了解如果使用调整大小事件时会触发很多事件,而又不会使事件发生冲突。
保罗·爱尔兰(Paul Irish)具有出色的功能,可以很好地消除调整大小的声音。强烈建议使用。跨浏览器工作。前几天在IE8中对其进行了测试,一切都很好。
http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
请务必查看演示以查看区别。
这是完整性的功能。
(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...
});