window.location.href vs clicking on an Anchor - javascript

What's the difference between clicking on:
<a href />
vs.
calling window.location.href = ...
?

Wherever possible, you should use <a href="foo.html"> over window.location.href, for a number of very good reasons.
If you have javascript disabled, none of the links would work.
Spiders, such as Google Bot, do not interpret javascript, and so they won't follow any of your links.
IT BREAKS THE INTERNET. No, really though - the World Wide Web is built on the very basis of discoverable linkages between pages. Hiding these linkages with non-standard .. err, links, goes against that very premise.
It makes for a bad user experience: a user expects that when they mouse over a link, they will have access to some information:
the destination displayed in the status bar (very important!)
right-click -> copy link location
middle-click -> open new tab
etc
Using window.location breaks all of these
It's much easier!

Setting window.location.href = 'thepage.html' is the same as calling:
window.open('thepage.html', '_self');
I.e. the target is limited to the same window, as that is where the location property is. This has the same effect as clicking a link without a target attribute:
...
You can use the open method instead to specify a different target, like a new window:
window.open('thepage.html', '_blank');
This has the same effect as clicking a link with that target:
...
You can also use the open method to open a new window. The return value is a reference to the window, so you can use that to set the location of that window instead of the current window:
var w = window.open('about:blank', '_blank');
w.location.href = 'thepage.html';

Don't forget that in addition to the above answers, clicking on a hyperlink (anchor tag) will trigger that element's onclick handler (if any), whereas the Javascript version clearly doesn't and just changes the window's location.
It is possible to manually invoke the onclick handler from Javascript if you want to simulate a click, but you must remember to do this manually. The snippets you posted would differ in this regard, which could be the cause of any behavioural differences.

With the anchor you can specify the target property, but with window.location.href you can't.
Generally the anchor is used when a user wants to redirect the browser to another location, window.location.href is used when the redirection is done using javascript.

In addition to the other answers given, clicking on an <a> element with the href attribute sapecified will cause the browser to navigate to the URL in the href, regardless of whether JavaScript is enabled or not.

document.referrer contains a reference on the server and client to the url of the page that contained the link the user clicked to get to the new page-
scripted location methods do not.

Related

Read iframe redirect (same domain)

I'm working in writing a chrome extension, and as a result I have the peculiar situation of using non-cross domain Iframes, without the ability to alter the page being displayed in the frame.
When a user clicks a certain link, in he iframe, I want to run some JavaScript. The default behavior for clicking that link is to load page targetpage.com. I don't think it's possible, or easy, to read listen for a particular element being clicked inside an iframe
As a workaround, I figure I can check if the iframe reloads, pointing to targetpage.com, and then perform the action.
Note: the action is entirely in the parent page, let's imagine I'm just trying to trigger an alert box.
I know how to trigger JavaScript when an iframe loads. My three questions are:
1) how can I check the url of an iframe?
2) is there a way to check the iframe, url prior to targetpage.com being loaded. Esther than after?
3) is there a better solution?
You could listen to webNavigation.onBeforeNavigate in background page, it fires when a navigation is about to occur, and you could get url and frameId in the callback parameter.
This may not be the best answer because I haven't played around with this much.
Chrome has a webNavigation API that looks to be something which may come in handy for your extension.
However if you want to get the current domain you're on you'd use...
document.domain
If you're in a subdirectory of that domain you can grab that with...
window.location
It also works with an added hash to the url.
If you want the url without the hash you could use document.referrer or if you feel hacky you could do something like...
var str = window.location
var res = str.toString().split(str.hash)
document.body.innerHTML = res

Getting direct URL while clicking javascript button on specific website

I am displaying an online internal website.
Upon clicking on a button "A" it processes a task, and goes to another HTML page. However, this direct address is like "hidden" (hard to explain).
For example, for each page I am accessing by simple button click, it's always the same URL (like http://host.com for every page I display from them).
I am using Firefox, and I need to know how to get the exact HTML address (or direct URL) used for displaying these full new pages. I managed to do it few months ago, but not anymore.
It will help me to automate some tasks and bashing programs. I am openned to any linux browser in case you find a way to help me. Thanks a lot.
it sounds like domain masking is used. you could check the source and see if a frame is being used on the page. the source should indicate the src of the frame, revealing the location of the page.
<frame src="page.html">
If the button uses window.open to navigate to the url, you could override that method and intercept the url there:
var oldOpen = window.open;
window.open = function(){
console.log(arguments[0]);
oldOpen.apply(window, arguments);
};

preventing external page from redirecting MY (parent) page

Using the latest version of Chrome on Mac OS 10.7.
I assume it is some clever javascript that is enabling the folks at this webpage:
http://www.chairworks.com/
...to close my (the parent) page which opened their (chairworks.com) page in the first place.
I did not open them with javascript, but with an <a> tag with the target="_blank" attribute.
If I disable javascript, then the behavior stops.
www.chairworks.com
I would expect the page at chairworks.com/ to simply open in another tab/window... but what I find is that as soon as the new browser tab opens, it closes, and then my page (the parent tab/window) gets redirected to the chairworks.com page.
Kinda rude.
Can someone point me to what code enables them to do that? And how do I prevent it? (Assuming I want a link to behave as expected, such as in my demo page.)
I believe the proper thing to do is set corresponding link type attribute so the browser doesn't provide the target window with and opener reference.
Link
You can read more about link types here: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
This is the script they are using:
setTimeout('redirect_page()',0);
function redirect_page(){if (window.opener) { window.opener.location.href = '/home.html'; window.close(); } else { location.href = '/home.html'; }}
As to how to circumvent it (just an idea):
Create your own blank page, with it's source set to about:blank. When it loads (or after a time-out) you could write some code to that window that will then open the offending link.
Then the offending link just closes your buffer-page. F*ck 'm!! Power to the user!
Edit: looks like you could also name your page home.html hehe, but that is not such a workable solution..
Final Edit: SIMPLE LOGIC people...
www.chairworks.com
works for everyone, no javascript needed.
See this working jsfiddle example.
As #GitaarLAB explained, the targeted website is using the window.opener property to get access to your page. Using some Javascript yourself, and an about:blank page in the middle, can help you cut their access to your page. It would be like:
http://www.chairworks.com/
Some notes:
I'm leaving the href property there for users without JS enabled (guess what! the targeted website won't have JS neither! ;), or the web crawlers like search engines' (only those who don't care about JS stuff, though)
Before redirecting to the targeted website, you cut the back-link by resetting the window.opener attribute of the new window.
And after opening the targeted website, there's a return false; to prevent the normal the browser to use the href and target attributes.

How to put a window opened with window.open() behind the opener window?

I have a link that when clicked replaces the current page with another through the default <a> element click behaviour, but which also calls a JavaScript function to open another page in a new window. I would like the new window opened from my JavaScript function to appear behind the current window but can't figure out how to do this. In actual usage, I am feeding click thrus to a database, the link that is controlled by the window.open statement. The other link is to the clients site in a new window. I want the clients site to appear on top.
My current code is as follows:
<script language="JavaScript" type="text/JavaScript">
function countClicks(a,b)
{
window.open("http://stackoverflow.com?id="+a+"&id2="+b, "_blank");
}
</script>
test
So for the example URLs shown above I would like the (original) window with Google to appear in front of the new window with StackOverflow, but the new window always opens in front.
Try using window.focus() at the end of your existing function:
function countClicks(a,b) {
window.open("http://stackoverflow.com?id="+a+"&id2="+b, "_blank");
window.focus();
}
That should bring the existing window back to the front, noting that behaviour may vary between browsers and depending on popup-blocking settings, etc.
Or you could just swap the two urls, i.e., put the StackOverflow url in the href with the appropriate query string specified directly rather than in JS, and put the Google url in the window.open() call.
Popup behavior varies based on browser/user settings. I haven't been able to replicate the open behind behaviour myself, but I believe what you're looking for is .focus().
Try:
window.open("http://stackoverflow.com?id="+a+"&id2="+b, "_blank").focus();

Accessing the content of other tabs in a browser

I am using Mozilla Firefox and I am trying to figure out a way to access the content of other tabs in the same window using JavaScript and the DOM (I am open to other techniques if exist).
E.g., I want to run JavaScript code in tab1 which can find the title of some other tab. Basically I need this so that I can identify a tab which has opened due an href in my current page without using window.open method. All I want is a simple hyperlink which opens a page belonging to the same domain as the current page (the page should be opened in a new tab). Now I want to be able to access this new tab from the current tab.
Whilst you can easily open a new window using JavaScript, I'm sure that is as far as it goes. From a security point of view you wouldn't want JavaScript in one tab being able to query / access the DOM in another tab. Any site would then be able to gain access to your bank account details, etc. if both sites were opened in separate tabs.
You can access the new window/tab if it was opened with JavaScript and the page indeed is in the same domain.
You can open the window/tab like so
var win = window.open("/path_to_page");
Then you'll have to wait for the page to load before you can access e.g. the title.
win.onload = function(){ alert(win.document.title); };
You could use HTML5 cross-window messaging (archive.org link...but that's kind of cutting edge.
Even in that case, you'd probably need to hijack the <a> tag 'click' event with JavaScript and open the window yourself so that you'd have access to the new window object for posting messages.
Try setting a cookie which is accessible to any page in the same domain. On other pages, use a JavaScript timer to check if the cookie value has changed and when it has you can use its value and take an action.
It worked for me.
Well, this would not be possible, you could try
<a target="_blank" rel="opener" href="about:blank"></a>
This makes a link that opens an about:blank, this will have the same domain as the page that opened It because of the Same-Origen-policy.

Categories