Giter VIP home page Giter VIP logo

jquery-hashchange's Introduction

jQuery hashchange event

http://benalman.com/projects/jquery-hashchange-plugin/

Version: 1.3, Last updated: 7/21/2010

This jQuery plugin enables very basic bookmarkable #hash history via a cross-browser window.onhashchange event.

Visit the project page for more information and usage examples!

Documentation

http://benalman.com/code/projects/jquery-hashchange/docs/

Examples

These working examples, complete with fully commented code, illustrate a few ways in which this plugin can be used.

http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/

Support and Testing

Information about what version or versions of jQuery this plugin has been tested with, what browsers it has been tested in, and where the unit tests reside (so you can test it yourself).

jQuery Versions

1.2.6, 1.3.2, 1.4.1, 1.4.2

Browsers Tested

Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5, Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.

Unit Tests

http://benalman.com/code/projects/jquery-hashchange/unit/

A more robust solution

This plugin is, by design, very basic. If you want to add lot of extra utility around getting and setting the hash as a state, and parsing and merging fragment params, check out the jQuery BBQ plugin. It includes this plugin at its core, plus a whole lot more, and has thorough documentation and examples as well. You can't have too much of a good thing!

Known issues

While this jQuery hashchange event implementation is quite stable and robust, there are a few unfortunate browser bugs surrounding expected hashchange event-based behaviors, independent of any JavaScript window.onhashchange abstraction. See the following examples for more information:

Chrome: Back Button
http://benalman.com/code/projects/jquery-hashchange/examples/bug-chrome-back-button/

Firefox: Remote XMLHttpRequest
http://benalman.com/code/projects/jquery-hashchange/examples/bug-firefox-remote-xhr/

WebKit: Back Button in an Iframe
http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/

Safari: Back Button from a different domain
http://benalman.com/code/projects/jquery-hashchange/examples/bug-safari-back-from-diff-domain/

Also note that should a browser natively support the window.onhashchange event, but not report that it does, the fallback polling loop will be used.

Release History

1.3 - (7/21/2010) Reorganized IE6/7 Iframe code to make it more "removable" for mobile-only development. Added IE6/7 document.title support. Attempted to make Iframe as hidden as possible by using techniques from http://www.paciellogroup.com/blog/?p=604. Added support for the "shortcut" format $(window).hashchange( fn ) and $(window).hashchange() like jQuery provides for built-in events. Renamed jQuery.hashchangeDelay to jQuery.fn.hashchange.delay and lowered its default value to 50. Added jQuery.fn.hashchange.domain and jQuery.fn.hashchange.src properties plus document-domain.html file to address access denied issues when setting document.domain in IE6/7.
1.2 - (2/11/2010) Fixed a bug where coming back to a page using this plugin from a page on another domain would cause an error in Safari 4. Also, IE6/7 Iframe is now inserted after the body (this actually works), which prevents the page from scrolling when the event is first bound. Event can also now be bound before DOM ready, but it won't be usable before then in IE6/7.
1.1 - (1/21/2010) Incorporated document.documentMode test to fix IE8 bug where browser version is incorrectly reported as 8.0, despite inclusion of the X-UA-Compatible IE=EmulateIE7 meta tag.
1.0 - (1/9/2010) Initial Release. Broke out the jQuery BBQ event.special window.onhashchange functionality into a separate plugin for users who want just the basic event & back button support, without all the extra awesomeness that BBQ provides. This plugin will be included as part of jQuery BBQ, but also be available separately.

License

Copyright (c) 2010 "Cowboy" Ben Alman
Dual licensed under the MIT and GPL licenses.
http://benalman.com/about/license/

jquery-hashchange's People

Contributors

cowboy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery-hashchange's Issues

getScript()

Hi,
I need to use javascript on the loaded page.
So I used $.getScript() to load my javascript file needed for the loaded page, but it doesn't work :

[code]
...
.appendTo( '#maincontent')

            .load( 'ajax/' + url + '.php', function() {
                $( '#theloader' ).fadeOut(300);
                $.getScript("js/main.js");
            });

...
[/code]

Do you have any idea ?

Thanks for your answer !

[enhancement] Add missing bower.json.

Hey, maintainer(s) of cowboy/jquery-hashchange!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library cowboy/jquery-hashchange is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "cowboy/jquery-hashchange",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Is this plugin still valid?

Bit new to the game, is this plugin still working correctly? Or has it been superseded by some native functionality?

$.browser is undefined

I'm getting this error:

TypeError: $.browser is undefined
Line 300

Hashchange 1.3
jQuery 2.1.0
Firefox 27 (this won't matter, but just for completeness)

I think the error speaks for itself.

named function expression

In self.start there is a named function expression: loopy which will cause issues in IE browsers, but more specifically the blackberry browser. One possible solution is to remove the function name and use arguments.callee... although I'm not sure if this is kosher.

IE8 x-ua compatible mess

Hello, dunno if this is a jquery bug or jquery onhashchange bug, i'll explain :
when a user activates compatibility mode in IE8 (so manual modification), jQuery.browser.version do report "7.0".
but if the website force ie7 mode (with meta http-equiv="X-UA.. content="IE=EmulateIE7), jQuery will report "8.0"

As you can see, the code from jquery-hashchange will fail here if the website uses the meta way. Because it'll try to use native onhashchange event wich will not be available when emulating ie7.

I know jQuery doesn't want to make fancy things on jQuery.browser, that's why i'm adressing the bug to jquery-hashchange

There's an easy workaround, just test document.documentMode wich will report good versions in both cases : "7.0" when the browser is in compatibility mode (manual way) or forced by a meta. Also it will report 8.0 if in normal mode

What do you think ?

source : http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

How disable and enable hashchange

I am using hashchange to handle some cases when the hash changes. But i want to change the hash without triggering the hashchange event in some cases ..Is it possible..If so explain me how can it be done.

Bower

Could you please push the latest version up to bower? It's still stuck on 1.3

Thanks and all the best.

Safari 4 - Hash change event throws error after navigating to a page on a different domain

To reproduce (in Safari 4, OSX):

  1. Visit http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
  2. Click on the Test buttons to trigger hash change
  3. Visit http://google.com (or another domain)
  4. Click the back button several times. The first hash change will throw an error.

The error returned is:
TypeError: Result of expression 'url' [undefined] is not an object.
Line 91 on: jquery.ba-hashchange.js

Cheers & Thanks for the great plugin

Scroll and navigate Back does not fire event on Android

Pushing the Back button on Android's WebKit browser after a page has been scrolled down causes the address to change to the previous one as expected, also scrolls the page to the top, but the hashchange event does not fire.

Plugin works fine without scrolling. Also hashchange event works fine without the plugin on this browser.

Observed on: Mozilla/5.0 (Linux; U; Android 2.1-update1; en-ro; Desire_A8181 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

in IE 8 the js(and jquery 1.4.4) from your title example with back button only refreshes title every third click

using the exact code (js not HTML) in your example (at http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/) with jquery v1.4.4, in IE 8, the hash is only changing every third time. In firefox it's catching the hash change perfectly.

My thought is that I'd be able to change the hash 20 or 30 times and hit the backbutton and see those changes as I step back through the history in the title. Again that's happening in FF but only one in three times in IE 8.

jQuery 1.4.3 and BBQ

Is it just me or does bbq hashchange not work in 1.4.3... i just updated to 1.4.3 only and now all my hyperlinks are just regular hyperlinks... hashchange event is not fired.

Using Requirejs

Has anyone used this with Requirejs?
I am struggling to get it to work.

This is what I have at the moment:

var require = {
    enforceDefine: true,
    paths: {
        'jquery': '/js/vendor/jquery.min',
        'hashchange': '/js/vendor/jquery.hashchange.plugin',
    },
    shim: {
        'jquery': {
            exports: '$'
        }
        'hashchange': {
            deps: ['jquery'],
            exports: 'Hashchange'
        }
    }
};

And this is how I define it later on:

define(['jquery', 'hashchange'], function ($, Hashchange) {
    // code
});

Any tips will be very appreciated,
Thanks!

Cannot read property 'msie' of undefined

Uncaught TypeError: Cannot read property 'msie' of undefined jquery.ba-hashchange.min.js?body=1:10

Uncaught TypeError: Cannot read property 'msie' of undefined jquery.ba-hashchange.js?body=1:300

$.browser.msie && !supports_onhashchange && (function(){

Seems like the msie is undefined. And I do need support for IE8.

accessing native window properties

In blackberry 4.6 window[ str_location ][ str_href ] will result in a TypeError exception being raised. Custom properties added to the window object can be access in the hash notation, but native properties cannot.

Title changes in IE8

Example:

   $('.maximize').live('click', function() {
         var el = $(this).parent().parent();
         var categoryID = el.attr('id').split('_')[1];
         $.bbq.pushState({category_id: categoryID});
    });
   $(window).bind('hashchange', function () {
         var category_id = $.bbq.getState('category_id');
         if (typeof(category_id) != "undefined") {
             maximizeCategory(categoryID);
         }
    });

I've also tried setting
window.location.hash = '';
Does the title needs to be changed explicitly?
document.title = "My Title";

IE8/IE9 bug: hash history + Iframe = fail

http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/

That example page documents a Safari/Chrome/Webkit issue with hashchange in an iframe (which has since been fixed by chrome).

However, it makes no mention that the same bug exists in IE8/9. Changing the hash inside an iframe in IE8/9 does not add to the browser history.

In this aspect, IE8/9 are actually worse handling hashchange than IE6/7. With IE 6/7, the special approach in the hashchange plugin that uses another hidden iframe works, even when the content being tracked is in an iframe. I tried changing the code to use that approach for IE8/9 as well, but it doesnt work because hitting the back button on a page with an iframe is not changing the iframe's hash value. Thus, polling doesn't overcome this issue either.

I'm at a complete loss for working though this issue for my site. Unfortunately I dont have the option of not running in an iframe - it is a facebook application, which runs on the FB site inside an iframe.

BTW, I did pick up this tidbit to confirm the functionality I am seeing: http://msdn.microsoft.com/en-us/library/cc288209%28v=vs.85%29.aspx
"Windows Internet Explorer 8. The browser's Back and Forward buttons do not generate onhashchange events for frames or iframes; instead, the frame is refreshed each time."

hashchange forward navigation failure with JSONP

Overview

In Internet Explorer 6, hashchange forward navigation doesn’t work when using the JQuery JSONP plug-in, http://code.google.com/p/jquery-jsonp/ .

Reproduction steps

  1. Navigate to http://webmeter.com.au/problem/
  2. Ensure “Do AJAX” is checked
  3. Click “1”.
    a. The browser will send an AJAX query. Once complete the status message should say “Success for #1”.
  4. Click “2”.
    a. The browser will send an AJAX query. Once complete the status message should say “Success for #2”.
  5. Click the browser BACK button
    a. The browser will send an AJAX query. Once complete the status message should say “Success for #1”.
    b. In IE6, the forward button will be disabled. This is wrong, it should be enabled and allow forward navigation to “2”.

Do the same test with FF 3.5+ or Safari. At step 5.b the forward button works correctly.

Do the same test again with IE6, but this time at step 2 ensure “Do AJAX” is not checked. At step 5.b the forward button works correctly.

Notes

I realize the reproduction steps are not using cross domain JSON and so don’t need the plug-in. However, I found this problem when actually needing cross domain JSON.

hashchange with chrome frame on IE8

Hi,

I am using the chrome frame ie add on for the Internet Explorer web browser.

In one file I am using the window.hashchanged() function and this seems to run. It seems like chrome frame changes the hash of the page.

Further if I place the tag the page seems to freeze.

Taking out the hashchange function call seems to solve the problem

Has anyone encounterd this bug before?

thx

IE8 does not add manual hash changes to history

This is something that could be added to make things more consistent across browsers.

While I do not expect the hashtag to be changed manually, it can happen. When it does, no history item is stored in IE 8. In firefox, the history item is stored and the back button works.

(1) Load a page in IE8.
(2) Manually change the hashtag (or append one).
(3) No item is added to the browser history.

I used the following code for testing.

$(window).hashchange(function(){
    alert(location.hash);
});
$(window).hashchange();

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.