jQuery-해시 변경 이벤트
나는 사용하고있다 :
$(window).bind( 'hashchange', function(e) { });
함수를 해시 변경 이벤트에 바인딩합니다. 이것은 IE8, Firefox 및 Chrome에서 작동하는 것처럼 보이지만 Safari에서는 작동하지 않으며 이전 버전의 IE에서는 작동하지 않는다고 가정합니다. 이러한 브라우저의 경우 해시와 hashchange이벤트 를 사용하는 JavaScript 코드를 비활성화하고 싶습니다 .
브라우저가 hashchange이벤트를 지원하는지 감지 할 수있는 jQuery를 사용하는 방법이 있습니까? 어쩌면 뭔가 jQuery.support...
다음을 통해 브라우저가 이벤트를 지원하는지 감지 할 수 있습니다.
if ("onhashchange" in window) {
//...
}
또한보십시오:
2017 년 현재 업데이트 된 답변은 누구나 필요할 경우 onhashchange모든 주요 브라우저에서 잘 지원 된다는 것 입니다. 자세한 내용은 caniuse 를 참조하십시오. jQuery와 함께 사용하려면 플러그인이 필요하지 않습니다.
$( window ).on( 'hashchange', function( e ) {
console.log( 'hash changed' );
} );
때때로 나는 hashbang URL이 여전히 사용되는 레거시 시스템을 발견하고 이것은 도움이됩니다. 새로운 것을 구축하고 해시 링크를 사용하는 경우 HTML5 pushState API를 대신 사용하는 것이 좋습니다.
여기에서 사용 가능한 기능 및 크로스 브라우저 문제를 요약하는 해시 변경 플러그인이 있습니다 .
문제에 대한 다른 접근 방식 ...
hashchange 이벤트를 메서드에 바인딩하는 세 가지 방법이 있습니다.
<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>
Note that in case of IE 7 and IE 9 if statment will give true for ("onhashchange" in windows) but the window.onhashchange will never fire, so its better to store hash and check it after every 100 millisecond whether its changed or not for all versions of IE.
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);
}
What about using a different way instead of the hash event and listen to popstate like.
window.addEventListener('popstate', function(event)
{
if(window.location.hash) {
var hash = window.location.hash;
console.log(hash);
}
});
This method works fine in most browsers i have tried so far.
this tiny jQuery plugin is very simple to use: https://github.com/finnlabs/jquery.observehashchange/
I think Chris Coyier has solution for that hashing problem, have a look at his screencast:
Best Practices with Dynamic Content
Use Modernizr for detection of feature capabilities. In general jQuery offers to detect browser features: http://api.jquery.com/jQuery.support/. However, hashchange is not on the list.
The wiki of Modernizr offers a list of libraries to add HTML5 capabilities to old browsers. The list for hashchange includes a pointer to the project HTML5 History API, which seems to offer the functionality you would need if you wanted to emulate the behavior in old browsers.
Here is updated version of @johnny.rodgers
Hope helps someone.
// 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
'Programing' 카테고리의 다른 글
| Chrome : 크기를 조정할 수없는 텍스트 영역 만들기 (0) | 2020.09.25 |
|---|---|
| Python 용 MongoDB ORM? (0) | 2020.09.25 |
| Xcode에서 PhoneGap 앱의 자바 스크립트 오류를 확인하는 방법은 무엇입니까? (0) | 2020.09.25 |
| 파일 시스템이 아닌 데이터베이스에 파일을 저장합니까? (0) | 2020.09.25 |
| utf8_general_ci와 utf8_unicode_ci의 차이점은 무엇입니까? (0) | 2020.09.25 |