javascript - location.host vs location.hostname and cross-browser compatibility? - Stack Overflow

admin管理员组

文章数量:1126447

Which one of these is the most effective vs checking if the user agent is accessing via the correct domain.

We would like to show a small js based 'top bar' style warning if they are accessing the domain using some sort of web proxy (as it tends to break the js).

We were thinking about using the following:

var r = /.*domain\$/;
if (r.test(location.hostname)) {
    // showMessage ...
}

That would take care of any subdomains we ever use.

Which should we use host or hostname?

In Firefox 5 and Chrome 12:

console.log(location.host);
console.log(location.hostname);

.. shows the same for both.

Is that because the port isn't actually in the address bar?

W3Schools says host contains the port.

Should location.host/hostname be validated or can we be pretty certain in IE6+ and all the others it will exist?

Which one of these is the most effective vs checking if the user agent is accessing via the correct domain.

We would like to show a small js based 'top bar' style warning if they are accessing the domain using some sort of web proxy (as it tends to break the js).

We were thinking about using the following:

var r = /.*domain\.com$/;
if (r.test(location.hostname)) {
    // showMessage ...
}

That would take care of any subdomains we ever use.

Which should we use host or hostname?

In Firefox 5 and Chrome 12:

console.log(location.host);
console.log(location.hostname);

.. shows the same for both.

Is that because the port isn't actually in the address bar?

W3Schools says host contains the port.

Should location.host/hostname be validated or can we be pretty certain in IE6+ and all the others it will exist?

• javascript
• html
• window
• location
• host

Share Improve this question Follow edited Oct 18, 2016 at 16:28 Kaspar Lee 5,58655 gold badges3333 silver badges5454 bronze badges asked Jul 17, 2011 at 18:34 anonymous-oneanonymous-one 15k1919 gold badges6262 silver badges8686 bronze badges 3

• 7 One thing to note is that google chrome has a location.origin, where MSIE and Firefox do not. developer.mozilla.org/En/Window.location - msdn.microsoft.com/en-us/library/ms952653.aspx – Benbob Commented Aug 1, 2011 at 1:54
• See also: Whats the difference between window.location.host and window.location.hostname – hippietrail Commented Oct 20, 2012 at 7:48
• possible duplicate of Whats the difference between window.location.host and window.location.hostname – Ankur Commented Oct 14, 2014 at 10:38

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 1427

As a little memo: the interactive link anatomy

--

In short (assuming a location of http://example.org:8888/foo/bar#bang):

• hostname gives you example.org
• host gives you example.org:8888

host just includes the port number if there is one specified. If there is no port number specifically in the URL, then it returns the same as hostname. You pick whether you care to match the port number or not. See https://developer.mozilla.org/en-US/docs/Web/API/Location for more info on the window.location object and the various choices it has for matching (with or without port).

I would assume you want hostname to just get the site name.

If you are insisting to use the window.location.origin You can put this in top of your code before reading the origin

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

Solution

PS: For the record, it was actually the original question. It was already edited :)

Your primary question has been answered above. I just wanted to point out that the regex you're using has a bug. It will also succeed on foo-domain.com which is not a subdomain of domain.com

What you really want is this:

/(^|\.)domain\.com$/

Just to add a note that Google Chrome browser has origin attribute for the location. which gives you the entire domain from protocol to the port number as shown in the below screenshot.

MDN: https://developer.mozilla.org/en/DOM/window.location

It seems that you will get the same result for both, but hostname contains clear host name without brackets or port number.

From the mdn web docs you can see an interactive location demo where you can hover over the elements to highlight their meaning:

本文标签： javascriptlocationhost vs locationhostname and crossbrowser compatibilityStack Overflow