페이지에 포함될 도구 모음을 만들고 있습니다. 포함될 div는 기본적으로 display : none 입니다. 도구 모음에 이벤트 리스너를 배치하여 표시 될 때 수신하여 초기화 할 수있는 방법이 있습니까? 아니면 포함하는 페이지에서 변수를 전달해야합니까?
감사
답변
Javascript 이벤트는 사용자 상호 작용을 처리 합니다. 코드가 충분히 구성되어 있으면 가시성이 변경되는 동일한 위치에서 초기화 함수를 호출 할 수 있어야합니다 (즉 myElement.style.display, 여러 위치에서 변경해서는 안되며 대신 다음과 같은 기능 / 메소드를 호출합니다. 이것과 당신이 원하는 다른 것).
답변
앞으로는 새로운 HTML Intersection Observer API가 여러분이 찾고있는 것입니다. 대상이라고하는 하나의 요소가 장치 뷰포트 또는 지정된 요소와 교차 할 때마다 호출되는 콜백을 구성 할 수 있습니다. 최신 버전의 Chrome, Firefox 및 Edge에서 사용할 수 있습니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 를 참조 하십시오 .
디스플레이 관찰을위한 간단한 코드 예제 : 전환 없음 :
// Start observing visbility of element. On change, the
// the callback is called with Boolean visibility as
// argument:
respondToVisibility(element, callback) {
var options = {
root: document.documentElement
}
var observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
callback(entry.intersectionRatio > 0);
});
}, options);
observer.observe(element);
}실행 중 : https://jsfiddle.net/elmarj/u35tez5n/5/
답변
var targetNode = document.getElementById('elementId');
var observer = new MutationObserver(function(){
if(targetNode.style.display != 'none'){
// doSomething
}
});
observer.observe(targetNode, { attributes: true, childList: true });조금 늦을 수도 있지만 MutationObserver를 사용하여 원하는 요소의 변경 사항을 관찰 할 수 있습니다. 변경이 발생하면 요소가 표시되는지 확인하기 만하면됩니다.
답변
적어도 한 가지 방법이 있지만 그다지 좋은 방법은 아닙니다. 다음과 같이 변경 사항에 대해 요소를 폴링 할 수 있습니다.
var previous_style,
poll = window.setInterval(function()
{
var current_style = document.getElementById('target').style.display;
if (previous_style != current_style) {
alert('style changed');
window.clearInterval(poll);
} else {
previous_style = current_style;
}
}, 100);DOM 표준은 또한 뮤 테이션 이벤트를 지정 하지만, 저는 그것들을 사용할 기회가 없었고, 그것들이 얼마나 잘 지원되는지 확신 할 수 없습니다. 다음과 같이 사용합니다.
target.addEventListener('DOMAttrModified', function()
{
if (e.attrName == 'style') {
alert('style changed');
}
}, false);이 코드는 내 머릿속에서 벗어 났으므로 작동하는지 확실하지 않습니다.
가장 쉬운 해결책은 당신의 목표를 표시하는 기능에 콜백을 가지고하는 것입니다.
답변
나는 이와 같은 문제가 있었고 우리 사이트에서 그것을 해결하기 위해 jQuery 플러그인을 만들었습니다.
https://github.com/shaunbowe/jquery.visibilityChanged
귀하의 예에 따라 사용하는 방법은 다음과 같습니다.
$('#contentDiv').visibilityChanged(function(element, visible) {
alert("do something");
});답변
@figha가 말했듯 이 이것이 자신의 웹 페이지 라면 요소를 표시 한 후에 실행해야하는 모든 것을 실행해야합니다.
그러나 질문에 답하기 위해 (그리고 이것이 일반적인 사용 사례 인 Chrome 또는 Firefox 확장 프로그램을 만드는 모든 사람 ) Mutation Summary 및 Mutation Observer 가 DOM 변경이 이벤트를 트리거하도록 허용합니다.
예를 들어, data-widget속성이 DOM에 추가되는 요소에 대한 이벤트를 트리거합니다 . 대출 데이비드 월시의 블로그에서이 훌륭한 예를 :
var observer = new MutationObserver(function(mutations) {
// For the sake of...observation...let's output the mutation to console to see how this all works
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// Notify me of everything!
var observerConfig = {
attributes: true,
childList: true,
characterData: true
};
// Node, config
// In this case we'll listen to all changes to body and child nodes
var targetNode = document.body;
observer.observe(targetNode, observerConfig);응답에는 added,removed , valueChanged그리고 더 . 등을 valueChanged포함한 모든 속성을 포함합니다 display.
