what is the #! sign in the url what does it mean? [duplicate] - html

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What is it when a link has a pound “#” sign in it
i saw the #! sign in the url
like :
http://www.google.jo/#!
but i dont know what is it mean?
i know that
this
http://www.foo.com#bar
is used to link an element in the page .
but what about ! character

It's called a URL HASH and is used for in-page bookmarking. It is now also used to maintain page state in AJAX applications. Anything after the # can easily be parsed and re-written without forcing a page reload, allowing the JavaScript code to load/hide/show page elements based on the developer's choosing.

It is called a hash, and it is used to denote an anchor in the page. Basically when the page loads it will seek out the anchor and scroll the page to it.
http://www.google.jo/#hl=ar&source=hp
<div>content</div>
<div id="hl-ar">scroll here</div>
<div>content</div>

Traditionally, the # was used in URLs to tell the browser to jump to an anchor in the page with the name following the #.
In modern AJAX applications, it allows modification of the location bar URL without the page needing to reload, allowing the Back button on the browser to move back through AJAX state, as well as bookmarking of AJAX pages.

# in the url acts like a goto statement. ie move to a particular section of the same page.
Besides that it is also used by applications that heavily use ajax to render the larger part of the website without refreshing the page (ie the page doesn't refresh but a considerable amount of html is requested from the server using ajax giving an impression that an entire page is loaded).
These apps face a problem that when the users click on the back or refresh button in the browser, it may not show them the correct page because there is no refresh happening. So a work around is applied by appending the history information to the url separated by #. And when the user clicks on refresh or back button, this information is used to take them to the correct page. There is a jquery plugin available that does this.
Also recently I came across this doc from google that explains how to make ajax applications 'crawlable' by using #! in the url

(#) is a hash sign.
It's used to indicate named parts of a page which allow the website to link to not just a page, but a particular part of it.

Related

Universal Analytics Tracking is Preventing Anchor Link From Working

I'm working on an email, and the writer wants the link to go directly to a video on a page. This video is in a tab, and lower on the page.
I set up an anchor to go to the video, but once Universal Analytics tracking has been added to the URL, the anchor link no longer works.
Works:
Link Text
Loads Page Without Going to Anchor:
Link Text
Is there anything I can do to get the anchor link to work properly?
I think the URL is a bit malformed in the second example (it may work but it's not what you mean to be accessing necessarily)
Try using:
http://www.foo.com/page-name/?tabset0=1&utm_source=foo-source&utm_medium=foo-medium&utm_content=foo-content&utm_campaign=foo-campaign#anchor-name
Fragment identifiers / anchor (as you refer to it) are supposed to be given at the end (the very end) of the address-- if you put it in the middle of the query it won't be passed correctly. In fact, fragment identifiers aren't given to the server. Only the client gets those... the CGI query is definitely given to the server.
Here's some more info: https://en.wikipedia.org/wiki/Fragment_identifier

Jumping to anchor on existing ajax/hash url

I have an ajax application that uses links like the following to serve appropriate pages...
www.mysite.com/#story=1
Depending on what link a user clicks on at www.mysite.com, I want the appropriate ajax-served page (e.g. www.mysite.com/#story=1) to load with the user directed to a page anchor.
The problem I'm having is that something like this doesn't work...
www.mysite.com/#story=1#pageHeadingAnchor1
(Because I'm assuming the initial hash I'm using to denote a page is preventing the second hash functioning as a page anchor).
Does anyone have an idea of how to deal with this combination of requirements (Ajax app hash plus page anchor hash)? Seems like I might need a javascript solution to parse a second argument and then programatically jump to the anchor? Or perhaps there's a better way?
Thanks for any thoughts at all.

How to Get ajax to stop appending a hashed location to a URL

I'm trying to determine where in my set of JavaScript files would I edit to make the urls of my site stop being appended with a "#home" to every portion of the site, or specific pages. I thought it was in the "deeplinking:" value of Pretty Photo, but then I realized that wouldn't make sense for that js to manipulate a URL in a normal page (a gallery, yes, and I have another site where that DID stop giving URLs to images in the Pretty Photo gallery, but not for regular page content). I cannot seem to locate it in the fw_scripts.js - which controls the majority of the site. I also tried to inspect element in FF to see what event handlers might be on the HTML tag, but to no avail.
Where would I find the javascript to edit to make the url's of any index.html file in a specific folder STOP appending a #home tag?
See what I mean here http://clients.runningh20.com/mf
Many thanks in advance.

Facebook, StaticHTML and form summission

This is weird!
I have set up a form using RapidMailer, and on an external site it works fine. (Just to complicate matters, the form is within a <div> as I display a background image, and then use the <div> to position the signup box halfway down the page)
But ...
Put it within an Facebook (Thunderpenny) StaticHTML page, (which I think is <iframe>?) and whilst I can enter name/email, and the submit button shows mouse up/mouse down events, it just won't submit.
I tried adding "pointer-event:auto" to the div so that it was to the fore, but no go. And no good asking the app creator as I doubt I'll get a response. Anyone any ideas? (** I could include page code, but it's 90% links to external js files Rapidmailer sets up)
Is it 'cos I got a <div> within an <iframe>? Do I need to add an <object> to the code somewhere???
It turns out that for some reason, the HTML code cannot find / use the javascripts even with direct URL's. I strongly suspect it's to do with "cross browser" limitations. In otherwords, the StaticHTML <iframe> is on one server, and the HTML code is trying to access javascript on a second server. And as the RapidMailer script is using three scripts direct from jquery.com, it's difficult to know what can be eliminated as they all contain error trapping routines.
In the end, I had to add a direct link to a status update on the Facebook page, and redirect it to the signup form on my blog. I then pinned the post the top. Alas, now for some reason it won't display a graphic with the link, and instead insists on showing the URL itself! Oh well!

Is there any way to request a page without displaying it?

If you link to something downloadable with a simple <a href, the user will download the file while staying on the current page. You can get this behavior with files that the browser has no plugin for (like .bin), or by sending a content-disposition header to force downloading.
Is there any method or header which keeps the user on the current page while still requesting the page? The idea is that the user clicks a link, the request is made, but the page doesn't change—like when downloading a file.
This could be done with an iframe I guess, which is not really pretty and makes another request when loading the page. Javascript is another obvious answer, but that's actually the reason for asking this question: compatibility with JS-less clients.
A form with the method set to HEAD is another ugly solution, but doesn't work anyway. Chromium ignores the method and simply performs a GET request...
Anymore ideas?
You could place an iframe on your page that is hidden. Then, give that iframe and id.
Use this id as the target of a link to the file you want to pull down.
I've created a demo at http://jsfiddle.net/dancrumb/N87nL/ to show you how this would work. Just style the iframe as being invisible and you're good to go
The page will load in the iframe, you'll stay on your page, it doesn't require JS. Oh boy!
Note that the iFrame doesn't have an initial value for src, so no request is made on page load.