Location.Host VS Location.Hostname and Cross-Browser Compatibility

location.host vs location.hostname and cross-browser compatibility?

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

Whats the difference between window.location.host and window.location.hostname

MDN Web Docs - window.location

host....: the host name and port number. [www.google.com]:80
hostname: the host name (without the port number or square brackets). www.google.com

Cross-browser compatibility HTML5 & CSS3

Sùmmary: it depends on your audience. There's no definitive answer to your concerns.

If your target is people who tend to own latest technologies, you can support browsers from 2 years onwards. In the other hand, if your target is people who love staying in old operating systems or you're talking about a large corporation/government, maybe you'll need to provide fallbacks or just skip using edge technologies in order to ensure a proper user experience across all target user devices and browsers.

OP said in some comment:

But I am not sure whether I have to completely scrap support to people
with old browsers and alternatively offer them with a mobile based
website for pc

If your target has latest tech, why you want to provide a mobile site for PC? You need to decide: if you think that you shouldn't support too old browsers and systems, you shouldn't try to maintain 2 sites when a great percentage of visitors will go to the "edge version". Otherwise, make your main site compatible with older browsers.

BTW, as I said before, there's no definitive answer to your concerns, because it's all about taking a decision and the time will tell you if it was right. Use analytics, check what are the most used Web browsers in your site and provide fallbacks when you detect that there's a high percentage of visitors using old browsers...

location.hostname of some web pages is not accurate

It seems the error was caused by one of my Chrome Extensions (not sure which, will try and determine later).

Disabling all the extensions brought back the correct location.hostname

Is javascript window.location crossbrowser?

window.location, which shares the same structure as document.location should be identical between modern browsers for the following properties:

• hash (except in FireFox ~< 16.0 where there was a bug with encoding)
• hostname
• href
• pathname
• port
• protocol
• search
• reload()
• replace()

Known Differences:

• Only Webkit has location.origin at the time of writing.

Mouse position - Cross browser compatibility

Here is how jQuery does it :

// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
  var doc = document.documentElement, body = document.body;
  event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
  event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc   && doc.clientTop  || body && body.clientTop  || 0);
}

Testing pageX (or pageY) or calculating it from clientX and scrollLeft ans clientLeft

cross-browser compatibility

Hmmm... seems like it is too slow, this will speed it up can't be sure it will be fast enough:

(I'm adding the jQuery elements to the closure so you don't have to search for them 4 times per move.)

<script type="text/javascript">

  var top_links = $('#top_links');
  var left_links = $('#left_links');

  $(document).scroll(function() {
     var scrollTop = $(window).scrollTop();
     scroll(0, scrollTop);
     if (scrollTop > 189) {
       top_links.css('position', 'fixed')
                .css('top', '0');
       left_links.css('position', 'fixed')
                 .css('top', '57px');
     }
     else {
       top_links.css('position','absolute')
                .css('top', '186px');
       left_links.css('position', 'absolute')
                 .css('top', '242px');
     }
 });
</script>

How to extract the hostname portion of a URL in JavaScript

suppose that you have a page with this address: http://sub.domain.com/virtualPath/page.htm. use the following in page code to achieve those results:

• window.location.host : you'll get sub.domain.com:8080 or sub.domain.com:80
• window.location.hostname : you'll get sub.domain.com
• window.location.protocol : you'll get http:
• window.location.port : you'll get 8080 or 80
• window.location.pathname : you'll get /virtualPath
• window.location.origin : you'll get http://sub.domain.com *****

Update: about the .origin

***** As the ref states, browser compatibility for window.location.origin is not clear. I've checked it in chrome and it returned http://sub.domain.com:port if the port is anything but 80, and http://sub.domain.com if the port is 80.

Special thanks to @torazaburo for mentioning that to me.

---

Related Topics