We Keep Coding

How to invoke javascript function when # is present in URL

I am trying to call JavaScript function when # is present in URL. I know normal behavior is to navigate / scroll to the specific tag. But could not find how to invoke a JavaScript function.
The below example is close but not solving my problem.
What is the meaning of # in URL and how can I use that?

You might be able to leverage the hashchange event to trigger the function, assuming you don't just want to keep polling the location to see if it changes.
DOCS: https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event
This code snippet will add the listener to the current page, then manipulate the hash and fire the function, displaying the new hash value. You could call any function here.
window.addEventListener('hashchange', function() {
alert(location.hash);
});
window.location += "#test";

var hash = window.location.hash;
if(hash){
// do something
}

<script>
if (window.location.href.includes('#')) {
// run your code here
}
</script>

use a location.hash function will solve your problem
var hash = window.location.hash.replace(/#/g, '');
if(hash){
// found a hash
console.log("heyy I found a hash")'
}
else{
// did not find a hash
console.log("Uh oh")
/*
try using :
window.location = window.location + '#' + "some random variable"
to create a new URL and every time the page loads find the hash and
display the wanted data.
*/
}
PS: this only works if your URL is like example.com/#xyz
then it will give you xyz as a console output. This may sound
vague but if you do this you may get a Idea

Where does window.location.reload() get its value from?

Trying reload the current page without the fragment identifier (i.e. hash symbol #) and using the following bit of code to do so which functions correctly:
var path = window.location.href.replace(/(\#.*)/,'');
window.location = path;
I'm also aware that the above second line could read window.location.href = path; which brings me to the next part.
Before arriving at the above code we tried:
var path = window.location.href.replace(/(\#.*)/,'');
window.location.href = path;
window.location.reload();
However that didn't work for us as the href value wasn't seeming to be set and I feel that reload() was calling before or instead of the href = path bit.
This got me curious, where does the reload() function for window.location get its value from to reload the page?
If I click around a page jumping between fragment identifiers (perhaps a table of contents) then the address bar updates accordingly and when called, window.location.reload() will do so with the correct fragment. Yet if I manually type something in the address bar and then call the reload() function it will not load with my manual entry but rather the last 'computer defined' value.
My guess is the user agent (in this particular case Chrome 44) is listening and updating the value which each interaction with the DOM or within the window. I checked out the HTML5 spec and the MDN Location.reload() docs for information and either it wasn't there or I'm too dense to find/understand it.
Can anyone explain to me where reload() gets it's value and how it is updated through a users interaction with a page?
What is the exact difference between using window.location = path and window.location.href = path in this scenario?

The location (value) only changes after a successful navigation! In other words, the location instance represents the currently loaded page (including the fragment).
Assigning a new value to window.location.href (re)loads a page.
So when you call window.location.href = path; the browser wants to load the new URL (the one without the #). But if you immediately call window.location.reload(); it's like saying "No, wait! Reload the current page (the one with the #)".

If you want to remove the "#" part of the url you have to explicitly set:
window.location.hash = ""
and then call window.location.reload().
window.location = path is nothing more than syntactic sugar for window.location.href = path.

issue in IE browser while opening a new window

i have this small piece of code
$("a").live("click",function(event) {
<% String lifeCare=LifeEventProperties.getInstance().getProperty("lifeCare");%>
var s="<%=lifeCare%>";
var href = $(this).attr('href');
if (href.indexOf(s) != -1) {
loadLifeCare(href) ;
event.preventDefault();
}
});
function loadLifeCare(href)
{
var wnd=window.open('/NASApp/benemain/LifeCareSite');
setTimeout(function() {
wnd.location.href = href;
}, 6000);
}
here in my jsp page i have checked for a particular word in url's using jquery and that word is like "something.com" which i am fetching from property file ,now if this something.com is found in the url which a user has clicked then i am calling a javascript function which then opens a new window with an internal site url which is taking care of user's session for that page which has this something.com and then i reload the page with "href" that user actually clicked .
the problem is its working good in all browser's other IE and my client loves IE,
IE is directly going to the link which bypassing loadLifeCare method and giving me this error on console
The value of the property 'loadLifeCare' is null or undefined, not a Function object
can any suggest something why it is happening ?is there anything in this code that IE don't understand ,i am getting a feeling that issue is with window.open() maybe but i am not sure and i don't even know any alternative if that's the case.
please help me and tell me if you need any clarification on anything..

Try this
fixed the deprecated live
used a better method to open windows (yours may very likely give access denied;
moved the function to before it is used and wrapped the click event handler in a a load handler
function loadLifeCare(href) {
var wnd=window.open('/NASApp/benemain/LifeCareSite',"lifeCareWin");
if (wnd) setTimeout(function() {
window.open(href,"lifeCareWin");
}, 6000);
}
$(function() {
$("a").on("click",function(event) {
<% String lifeCare=LifeEventProperties.getInstance().getProperty("lifeCare");%>
var s="<%=lifeCare%>";
var href = $(this).attr("href"); // this.href might be useful too
if (href.indexOf(s) != -1) {
loadLifeCare(href) ;
event.preventDefault();
}
});
});

Force iframe to (re)load document when only src hash changes

I have an iframe that's supposed to load different modules of a web application.
When the user clicks a navigation menu in the top window, it's passes a new url to the iframe. The trouble is, the new url doesn't actually point to a new page, it only uses a changed hash.
i.e.:
User clicks "dashboard", iframe src set to application.html#/dashboard
User clicks "history", iframe src set to application.html#/history
This means that the iframe does not actually load the src url again because hash changes don't require it to. The application inside the iframe is an angular app which loads the required modules dynamically using requireJS. We need this functionality to remain.
I need to force the frame source to load again even though only the hash changed. It's possible that I instead find a way to rewrite our angular app to dynamically unload/load the modules on push state events but that introduces several layers of issues for the app, plus some IE trouble.
I've tried:
Setting iframe src and calling it's location.reload, but that reloads the originally loaded url
Setting the iframe location.href/hash and calling reload, same issue
Blanking the src attribute and then setting the new url - no effect
The only solution I can find is to set the src to a blank screen, then onload set it to the new url:
var appIFrame = document.getElementById('appIFrame');
appIFrame.src = 'about:blank';
appIFrame.onload = function(){
appIFrame.src = '// set the real source here';
appIFrame.onload = false;
}
This works, yet it seems inefficient because there's an extra step.

Maybe add a dynamic GET parameter – f.e. the current timestamp, which you can get from the JavaScript Date object – to the iframe URL.
Instead of assigning application.html#/dashboard as src value, assign application.html?1234567890#/dashboard from your outside page (with 1234567890 replaced by the current timestamp, obviously).

I don't have a specific answer for you. However, the following script may proved useful (I wrote this about a year or so ago). The following script deals with re-adjusting iframe height when the document changes. This script was tested cross-browser. It does deal with the issues you're experience but indirectly. There is a lot of commenting with the Gist:
https://gist.github.com/say2joe/4694780

Here my solution (based on this stackoverflow answer):
var $ = function(id) { return document.getElementById(id); };
var hashChangeDetector = function(frame, callback) {
var frameWindow = frame.contentWindow || frame.contentDocument;
// 'old' browser
if (! "onhashchange" in window) {
var detecter = function(callback) {
var previousHash = frameWindow.location.hash;
window.setTimeout(function() {
if (frameWindow.location.hash != previousHash) {
previousHash = frameWindow.location.hash;
callback(previousHash);
}
}, 100);
};
}
else // modern browser ?
{
var detecter = function(callback) {
frameWindow.onhashchange = function () {
callback(frameWindow.location.hash);
}
};
}
detecter(callback);
};
hashChangeDetector($('myframe'), function(hash) {
alert ('detecting hash change: ' + hash);
});
You can test this here: http://paulrad.com/stackoverflow/iframe-hash-detection.html

Multiple Tracking onclick link of omniture's s.tl(), Cant figure out

I am using a omniture jasavscript for Site Catalyst.
In which, I am populating the required variables onclick of a link.
But the problem is I get a multiple (2) tracking on a single click, which is not the ideal behaviour. in these 2 tracking, The FIrst one I get is the old one and right after that I get the second latest tracking.
It seems like it is using the cache memory.
UPDATE
I tried reinitializing the object by using var s = {}; before and after the use of s.tl('this','e','',null);
But it didn't worked
Could someone suggest how it can be rectified.

Without seeing any code I can only speculate, but my guess is the additional hit is from SiteCatalyst's auto-link tracking - either an exit link because the target URL is not listed in linkInternalFilters, or a download link because the target URL ends with something listed in linkDownloadFileTypes.
I suspect, given the 'e' argument of your s.tl() example, that the link is an exit link. So on that note.. perhaps the solution here is to piggyback off the auto-exit-link tracking, instead of making your own s.tl() call. Adobe has a plugin called exitLinkHandler that will let you trigger additional variables whenever the auto-exit-link tracking occurs.
Here is the plugin:
/*
* Plugin: exitLinkHandler 0.5 - identify and report exit links
*/
s.exitLinkHandler=new Function("p",""
+"var s=this,h=s.p_gh(),n='linkInternalFilters',i,t;if(!h||(s.linkTyp"
+"e&&(h||s.linkName)))return '';i=h.indexOf('?');t=s[n];s[n]=p?p:t;h="
+"s.linkLeaveQueryString||i<0?h:h.substring(0,i);if(s.lt(h)=='e')s.li"
+"nkType='e';else h='';s[n]=t;return h;");
Within your s_doPlugins function, add the following:
s.url = s.exitLinkHandler();
if (s.url) {
// pop your variables here. Don't forget to pop `linkTrackVars` and `linkTrackEvents`, same as you would have done before
}
Now, this will make your additional variables pop on any exit link triggered. If you want it to only trigger on certain URL matches, or only on a specific match, you can do this several ways, depending on your needs:
If you only need to do a general substring match, you can pass some
or all of the target URL as the first argument for
s.exitLinkHandler() and it will match the passed argument against
the target URL.
If this isn't good enough, within the if(s.url) condition, you can
perform your own matching (e.g. regex matching) against the target
URL using s.url.
If you need to target by some DOM attribute of the link, within the
condition, s.eo is an object reference to the link that was
clicked, so you can write your own conditions around that.

Option 1
Omniture does not track links with # as exit links so you can do something like:
Search
<script>
(function (){
'use strict';
var links = document.querySelectorAll('.prepended-with-hash-for-tracking');
var track = function(e) {
e.preventDefault();
var link = e.currentTarget;
var url = link.href;
var trackingMessage = link.getAttribute('data-track-msg');
// Remove the hash.
if (url[0] === '#') {
url = url.substr(1);
}
// Track in omniture.
var s = s_gi('InsertYourRSID');
s.tl(link, 'o', trackingMessage, null, function(){
window.location.href = url;
});
};
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', track, false);
}
})();
</script>
Option 2
Another work-a-round is to set s.linkLeaveQueryString = true; and then append the url with a query parameter containing your domain name which matches a string in s.linkInternalFilters. e.g. Share
Option 3
Disable omniture's default external link tracking by setting s.trackExternalLinks=false; and then you can handle all external links with an event handler that calls s.tl() with JavaScript similar to option 1.
I would recommend option 3.