jQuery - 해시 변경 이벤트
사용 중:
$(window).bind( 'hashchange', function(e) { });
함수를 해시 변경 이벤트에 바인딩합니다.이것은 IE8, Firefox 및 Chrome에서 작동하는 것처럼 보이지만 Safari에서는 작동하지 않으며 이전 버전의 IE에서는 작동하지 않는 것으로 가정합니다.이 브라우저들을 위해, 나의 자바스크립트 코드를 사용하지 않도록 설정하고 싶습니다.hashchange사건의
브라우저가 지원하는 경우 jQuery를 통해 탐지할 수 있는 방법이 있습니까?hashchange이벤트? 아마도 뭔가가 있는 것 같아요.jQuery.support...
다음을 통해 브라우저가 이벤트를 지원하는지 여부를 탐지할 수 있습니다.
if ("onhashchange" in window) {
//...
}
참고 항목:
2017년 현재 업데이트된 답변은 필요한 사람이 있다면 다음과 같습니다.onhashchange는 모든 주요 브라우저에서 잘 지원됩니다.자세한 내용은 캐니우스를 참조하십시오.jQuery와 함께 사용하려면 플러그인이 필요하지 않습니다.
$( window ).on( 'hashchange', function( e ) {
console.log( 'hash changed' );
} );
가끔 저는 hashbang URL이 아직도 사용되는 레거시 시스템을 접하는데 이것은 도움이 됩니다.만약 당신이 새로운 것을 만들고 해시 링크를 사용하고 있다면 HTML5 pushState API를 대신 사용하는 것을 고려해 볼 것을 강력히 제안합니다.
여기서 사용할 수 있는 기능 및 교차 브라우저 문제를 요약하는 해시 변경 플러그인이 있습니다.
당신의 문제에 대한 다른 접근법은...
해시 변경 이벤트를 메서드에 바인딩하는 세 가지 방법이 있습니다.
<script>
window.onhashchange = doThisWhenTheHashChanges;
</script>
또는
<script>
window.addEventListener("hashchange", doThisWhenTheHashChanges, false);
</script>
또는
<body onhashchange="doThisWhenTheHashChanges();">
이 모든 것은 Win 7의 IE 9, FF 5, Safari 5 및 Chrome 12와 함께 작동합니다.
Mozilla 공식 사이트를 사용해 보십시오. https://developer.mozilla.org/en/DOM/window.onhashchange
다음과 같이 인용합니다.
if ("onhashchange" in window) {
alert("The browser supports the hashchange event!");
}
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.onhashchange = locationHashChanged;
방금 같은 문제에 부딪혔습니다(IE7의 해시 변경 이벤트 부족).제 목적에 맞는 해결 방법은 해시 변경 링크의 클릭 이벤트를 바인딩하는 것이었습니다.
<a class='hash-changer' href='#foo'>Foo</a>
<script type='text/javascript'>
if (("onhashchange" in window) && !($.browser.msie)) {
//modern browsers
$(window).bind('hashchange', function() {
var hash = window.location.hash.replace(/^#/,'');
//do whatever you need with the hash
});
} else {
//IE and browsers that don't support hashchange
$('a.hash-changer').bind('click', function() {
var hash = $(this).attr('href').replace(/^#/,'');
//do whatever you need with the hash
});
}
</script>
IE 7 및 IE 9의 경우 명령문이 에 대해 true("윈도우에서 해시 변경")이지만 .on 해시 변경 창은 절대로 실행되지 않으므로 해시를 저장하고 모든 버전의 IE에 대해 변경 여부를 100밀리초마다 확인하는 것이 좋습니다.
if (("onhashchange" in window) && !($.browser.msie)) {
window.onhashchange = function () {
alert(window.location.hash);
}
// Or $(window).bind( 'hashchange',function(e) {
// alert(window.location.hash);
// });
}
else {
var prevHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != prevHash) {
prevHash = window.location.hash;
alert(window.location.hash);
}
}, 100);
}
해시 이벤트 대신 다른 방법을 사용하고 popstate like를 듣는 것은 어떻습니까?
window.addEventListener('popstate', function(event)
{
if(window.location.hash) {
var hash = window.location.hash;
console.log(hash);
}
});
이 방법은 제가 지금까지 시도한 대부분의 브라우저에서 잘 작동합니다.
이 작은 jQuery 플러그인은 사용하기 매우 간단합니다. https://github.com/finnlabs/jquery.observehashchange/
저는 Chris Coyier가 해싱 문제에 대한 해결책을 가지고 있다고 생각합니다. 그의 스크린캐스트를 보세요.
기능 기능을 탐지하려면 Modernizr을 사용합니다.일반적으로 jQuery는 브라우저 기능인 http://api.jquery.com/jQuery.support/ 을 검색할 수 있습니다.그러나 해시 변경은 목록에 없습니다.
Modernizr의 Wiki는 이전 브라우저에 HTML5 기능을 추가할 수 있는 라이브러리 목록을 제공합니다.해시 변경 목록에는 프로젝트 HTML5 History API에 대한 포인터가 포함되어 있으며, 이는 이전 브라우저에서 동작을 에뮬레이트하고 싶을 때 필요한 기능을 제공하는 것으로 보입니다.
여기 업데이트된 버전 of @johnny.ro dgers가 있습니다.
희망은 누군가를 돕습니다.
// ie9 ve ie7 return true but never fire, lets remove ie less then 10
if(("onhashchange" in window) && navigator.userAgent.toLowerCase().indexOf('msie') == -1){ // event supported?
window.onhashchange = function(){
var url = window.location.hash.substring(1);
alert(url);
}
}
else{ // event not supported:
var storedhash = window.location.hash;
window.setInterval(function(){
if(window.location.hash != storedhash){
storedhash = window.location.hash;
alert(url);
}
}, 100);
}
언급URL : https://stackoverflow.com/questions/3090478/jquery-hashchange-event
'IT' 카테고리의 다른 글
| PowerShell의 모든 사이트 및 바인딩 표시 (0) | 2023.08.11 |
|---|---|
| Angular 4와 함께 jQuery 플러그인을 사용하는 방법은 무엇입니까? (0) | 2023.08.11 |
| jQuery Ajax를 사용하여 MVC 컨트롤러 메서드에 개체 목록 전달 (0) | 2023.08.11 |
| 문자열은 어떻게 연결될 수 있습니까? (0) | 2023.08.11 |
| 하위 요소에 CSS 스타일 적용 (0) | 2023.08.06 |