문서 높이 변경 감지
document키가 변할 때 감지하려고합니다 . 그런 다음 페이지 레이아웃을 구성하는 데 도움이되는 몇 가지 기능을 실행해야합니다.
나는 찾고 있지 않습니다 window.onresize. 창보다 큰 전체 문서가 필요합니다.
이 변경 사항을 어떻게 관찰합니까?
function onElementHeightChange(elm, callback){
var lastHeight = elm.clientHeight, newHeight;
(function run(){
newHeight = elm.clientHeight;
if( lastHeight != newHeight )
callback();
lastHeight = newHeight;
if( elm.onElementHeightChangeTimer )
clearTimeout(elm.onElementHeightChangeTimer);
elm.onElementHeightChangeTimer = setTimeout(run, 200);
})();
}
onElementHeightChange(document.body, function(){
alert('Body height changed');
});
라이브 데모
높이 변경을 모니터링하려는 요소 내에서 너비가 0 인 absolute위치 iframe를 사용 resize하고 contentWindow. 예를 들면 :
HTML
<body>
Your content...
<iframe class="height-change-listener" tabindex="-1"></iframe>
</body>
CSS
body {
position: relative;
}
.height-change-listener {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 0;
border: 0;
background-color: transparent;
}
JavaScript (jQuery를 사용하지만 순수 JS에 적용 가능)
$('.height-change-listener').each(function() {
$(this.contentWindow).resize(function() {
// Do something more useful
console.log('doc height is ' + $(document).height());
});
});
어떤 이유로 든 height:100%설정 한 경우 body이를 구현할 다른 컨테이너 요소를 찾거나 추가해야합니다. iframe동적으로 추가 하려면 <iframe>.load이벤트를 사용하여 contentWindow.resize리스너 를 연결 해야합니다 . 이것이 IE7과 브라우저에서 *zoom:1작동하도록하려면 컨테이너 요소에 해킹을 추가 resize하고 <iframe>요소 자체 에 대한 'proprietary' 이벤트를 수신해야합니다 ( contentWindow.resizeIE8-10에서 복제 됨).
여기 바이올린이 있습니다 ...
내 2 센트. 혹시 앵귤러를 사용하고 있다면 다음과 같이 할 수 있습니다.
$scope.$watch(function(){
return document.height();
},function onHeightChange(newValue, oldValue){
...
});
vsync에서 언급했듯이 이벤트는 없지만 타이머를 사용하거나 다른 곳에 핸들러를 연결할 수 있습니다.
// get the height
var refreshDocHeight = function(){
var h = $(document).height();
$('#result').html("Document height: " + h);
};
// update the height every 200ms
window.setInterval(refreshDocHeight, 200);
// or attach the handler to all events which are able to change
// the document height, for example
$('div').keyup(refreshDocHeight);
여기 에서 jsfiddle을 찾으십시오 .
vsync의 대답은 완전히 괜찮습니다. 사용 setTimeout하고 싶지 않은 경우를 대비하여 사용할 수 있으며 requestAnimationFrame( 지원 참조 ) 물론 여전히 관심이 있습니다.
아래 예에서 본문은 추가 이벤트를 가져옵니다 sizechange. 그리고 몸의 높이나 너비가 변경 될 때마다 트리거됩니다.
(function checkForBodySizeChange() {
var last_body_size = {
width: document.body.clientWidth,
height: document.body.clientHeight
};
function checkBodySizeChange()
{
var width_changed = last_body_size.width !== document.body.clientWidth,
height_changed = last_body_size.height !== document.body.clientHeight;
if(width_changed || height_changed) {
trigger(document.body, 'sizechange');
last_body_size = {
width: document.body.clientWidth,
height: document.body.clientHeight
};
}
window.requestAnimationFrame(checkBodySizeChange);
}
function trigger(element, event_name, event_detail)
{
var evt;
if(document.dispatchEvent) {
if(typeof CustomEvent === 'undefined') {
var CustomEvent;
CustomEvent = function(event, params) {
var evt;
params = params || {
bubbles: false,
cancelable: false,
detail: undefined
};
evt = document.createEvent("CustomEvent");
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
}
evt = new CustomEvent(event_name, {"detail": event_detail});
element.dispatchEvent(evt);
}
else {
evt = document.createEventObject();
evt.eventType = event_name;
evt.eventName = event_name;
element.fireEvent('on' + event_name, evt);
}
}
window.requestAnimationFrame(checkBodySizeChange);
})();
triggerEvent프로젝트에 자체 기능 이 있으면 코드를 많이 줄일 수 있습니다 . 따라서 전체 함수를 제거하고 예를 들어 jQuery에서 trigger줄 trigger(document.body, 'sizechange');을 바꿉니다 $(document.body).trigger('sizechange');.
나는 이와 같이 @vsync의 솔루션을 사용하고 있습니다. 트위터와 같은 페이지에서 자동 스크롤을 위해 사용하고 있습니다.
const scrollInterval = (timeInterval, retry, cb) => {
let tmpHeight = 0;
const myInterval = setInterval(() => {
console.log('interval');
if (retry++ > 3) {
clearInterval(this);
}
const change = document.body.clientHeight - tmpHeight;
tmpHeight = document.body.clientHeight;
if (change > 0) {
cb(change, (retry * timeInterval));
scrollBy(0, 10000);
}
retry = 0;
}, timeInterval);
return myInterval;
};
const onBodyChange = (change, timeout) => {
console.log(`document.body.clientHeight, changed: ${change}, after: ${timeout}`);
}
const createdInterval = scrollInterval(500, 3, onBodyChange);
// stop the scroller on some event
setTimeout(() => {
clearInterval(createdInterval);
}, 10000);
최소한의 변경 사항과 기타 많은 사항을 추가 할 수도 있습니다.하지만 이것은 저에게 효과적입니다.
watch () 명령은 속성의 변경 사항을 확인합니다.
See this link: How to detect when the height of your page changes?
참고URL : https://stackoverflow.com/questions/14866775/detect-document-height-change
'Programing' 카테고리의 다른 글
| Java에서 상수를 선언하는 방법 (0) | 2020.12.12 |
|---|---|
| Pandas 시리즈에 단일 항목을 추가하는 방법 (0) | 2020.12.12 |
| 테이블 형식없이 SQL 쿼리 결과 가져 오기 (0) | 2020.12.12 |
| 모든 출력을 / dev / null로 리디렉션하는 방법은 무엇입니까? (0) | 2020.12.12 |
| Node.js – 이벤트 js 72가 처리되지 않은 '오류'이벤트를 발생시킵니다. (0) | 2020.12.12 |