Search code examples
phpjavascriptjqueryweb-applicationsiframe

What is the use of # in url

I realized that many of web app use # in their app's URL.

For example, Google Analytics.

This address is in the URL bar when I am viewing the visitor's language page:

https://www.google.com/analytics/web/?hl=en#report/visitors-language/a33185827w60383872p61754588/

This address is in the address bar when I am viewing the visitors' geolocation page:

https://www.google.com/analytics/web/?hl=en#report/visitors-geo/a33185827w60383872p61754588/

I think that this is the Google Analytics web app passing #report/visitors-language and #report/vistiors-geo.

I know that Google analytics is using an <iframe>. It seems that only the main content box is changing when displaying content.

Is # used because of the <iframe> functionality?

Solution

  • There are several answers but none cover the backend part.

    Here is a URL, one from your own example:

    www.google.com/analytics/web/?hl=en#report/visitors-language/a33185827w60383872p61754588/

    You can think about the post-hash (including the hash #) part as a client-side request.

    The web server will never know what was entered after the hash sign. It is the browser pointing to a specific ID on the page.

    For basic web pages, if you have this HTML: <a name="main">welcome</a>

    on a web page at www.example.com/welcome, going to www.example.com/welcome#main will scroll your browser viewport to the welcome text in the <a> HTML tag.

    The web server will not know whether #main was in the URL or not.

    Values in the URL after a question mark are called URL parameters, e.g. www.example.com/?foo=bar. The web server can deliver different content based on those values.

    However, there is a technology developed by Google called AJAX (Asynchronous JavaScript and XML) that makes use of the # part in the URL to deliver different content without a page load. It's not using an <iframe>.

    Using JavaScript, you can trigger a change in the URL's post-hash part and make a request to the server to get a specific part of the page, for example for the URL www.example.com/welcome#main2 Even if an element named #main2 does not exist, you can show one using JavaScript.

    A hashbang is #!. It is used to make search engine indexing easier by indicating that this part is a dynamic web page.