We Keep Coding

window hashchange event on internet explorer is not triggered

i have a simple function on javascript where if the window position based on the url hashtag, so after the document is ready i execute my function normally, also i have add a hashchange event where i call the same function.
Everything works as expected except on internet explorer, if the user presses the enter on address bar without changing the hash (if he changes it works) then the function is not executed, any idea how to catch the event that the user pressed enter on the same url with same hashtag ?

When the user presses enter in the URL bar it loads the page, even if the adress wasn't changed. So, in your case it would simply refresh the page.
To capture this event you can use the onbeforeunload javascript event. This event gives you the ability to determine the navigation type. Use event.currentTarget.performance.navigation.type to determine the type of navigation. This is working in IE, FF and Chrome.
function CallbackFunction(event) {
if (event.currentTarget.performance.navigation.type == 1) {
console.log("refreshing page");
}
}
document.onbeforeunload = CallbackFunction;
Hopefully this was of some help to you!!

Javascript warning before closing browser not working as expected

I tried the solution based of lots of examples and the event works only if something else is clicked first eg. a link has been first right clicked on the same page. Then if I click the browser close button it prompts a warning before closing as expected.
Otherwise if I first go to the page or refresh it and click close button it doesn't work and page closes. The code inside onbeforeunload function hits each time but in the last case clearly has no effect.
$("button, a").bind("click", function () {
window.onbeforeunload = null;
});
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?'; // the code hits each time - normally it does have no effect but if right-clicked a link on the page first it does work?
};
It looks as a very strange behaviour. Anyone has idea why this works only when another event has happened on the page first?
Tried in Firefox & Chrome.

It's a feature. According to MDN:
To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with; some don't display them at all.
What is the use case where you need the onbeforeunload popup to be shown even with no user interaction? Usually these are for preventing data loss on unsubmitted forms, for instance. If the user wants to leave the page and there isn't any reason to show the popup, you shouldn't attempt to do so.

Detect link click event in chat window

I need to capture the event that occurs when a user clicks a link on my chat application. I am using IE11.
Is there a way to capture the user clicking the link, when such a link could be dynamically added to the chat box (i.e. user sends "www.google.com" message) at any given time?
I have been using onbeforeunload by the way and while this detects the browser close event it will not detect the link click event, I am not sure why, so I was thinking that a jquery solution that checks the links on the page for an onclick could solve my problem...
Thanks,
dearg

Yes, you can use event delegation like:
$("#chatWindow).on('click', 'a', function () {
//do something
});

You could do it with a function like this:
$('a').on('click', function(){
//track clicked link here
return true; //to allow following the link this is the default behavior no need to add
return false; //prevent default behavior
});

Event for Back navigation in browser using script

I need to know whether user clicked the back navigation arrow in browser. I Used the below event but not occur this event while i am clicking the back navigation arrow.
$(window).on("navigate", function (event, data) {
});
please suggest your answer If you know.

You might use the popstate of the history.
The popstate event is only triggered by doing a browser action such as clicking on the back button (or calling history.back() in JavaScript). And the event is only triggered when the user navigates between two history entries for the same document.
You'll have to add a new entry to history with the same title and no change to the url
pushState(state, title, url)
and when you intercept the onpopstate you will do your desired actions, unbind the event and then use the history.back() api.
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
window.onpopstate = null;
history.back();
};
history.pushState({}, document.title, "");
This is not a proven method I've tested it just in Chrome.

Short answer - you can't.
Long answer - yoooooooooooouuuuuuuuuu caaaaaaaaannnnnnnnnn't.
At least not in the way that I think you're looking for. Best you can do is detect when user is leaving the page - though that doesn't necessarily mean that the back button was clicked. Also, you can't stop them leaving the page.
window.onbeforeunload = function(){
return 'Leave this page?';
};
Using the onbeforeunload event, you can run some arbitrary code - but the browser will show a modal dialog box asking the user whether they want to leave the page or remain on the page. You can't override this.

Best practice for warning the user they will lose data

I have a site which uses a lot of JavaScript (mainly jQuery) and I need a nice global way to let the user know that they will lose unsaved changes when they navigate away from a particular page.
At the moment I have an onchange event placed on the inputs and wrap my main navigation in a function which will display the warning when clicked.
This feels really clunky and doesn't scale well (navigation which is not part of the main navigation needs to be manually wrapped, which is far from ideal)

I have an onchange event on my inputs and set an isDirty variable to true when they change.
Then I use onbeforeunload event to warn the user about unsaved changes:
var isDirty = false;
window.onbeforeunload = function (evt) {
if (isDirty) {
return 'If you continue your changes will not be saved.';
}
}

You are looking for the onbeforeunload event.
like
$(window).bind('beforeunload', function(){
return "Are you really sure?";
});
native:
window.onbeforeunload = function(){
return "Are you really sure?";
});
That of course is just the "preventing method". You still need some logic to know whether or not there were changes on your site. That could easily be done by using a boolean for instance. Furthermore you should make a quick detection like
if('onbeforeunload' in window){}
I think all major browsers support the event nowadays, but there are still browser which don't know that event. So if the above condition fails, you can still fallback gracefully to another way.

Use on the on unload window event to catch when the page is going to change. Then prompt a lightbox alert to warn the user if navigating away any unsaved data will be lost.