How is this, conceptually, achieved?
e.g. access https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna (a google chrome extension download) and instead of installing it, close with the dialog X button.
I noticed that url changed, but content was not changed (well: the dialog was closed, but the rest of the page was not changed).
Question: How is that done? AFAIK when the url is changed, the page changes.
I think this is an HTML5 feature. It support your javascript messing with your navigation history
An article I was reading yesterday:
http://diveintohtml5.info/history.html
Related
I use a userscript to modify the client-side code of a website. This code is adding an anchor tag to the page. Its target is _blank. The thing is that if I click this link too frequently, the site errors. A simple refresh on the new tab fixes the problem.
When I click on the link and it instantly opens a new tab. But I don't want that new tab to render until I visit it, or with some sort of time delay. Is there a way of achieving this?
I am using Firefox, so Firefox-only solutions are fine. I found this, but I don't see a way of using it to prevent the tab from rendering in the first place. When I Google for this, I see results about add-ons that can solve the problem. But, the links to them always 404. Ideally, the solution would only affect the tabs created by this script instead of the way all tabs work, but if the only way to do it is to affect the way all tabs work, I'd accept that as a solution.
The Tampermonkey documentation says there is a GM_openInTab function. It has a parameter called loadInBackground, but it only decides if the new tab is focused when you click the link.
If there is a way of making this new tab render some HTML of my choosing, I think that would be a neat solution. i.e., I'd write some HTML that, on focus, goes to the actual website's page. If this is an option, I'd need to know how to open a tab to HTML of my choosing in grease monkey.
(Just realization of idea you told in your question yourself)
You can place simple page that waits for focus and then redirects to what you pass in URL parameter somewhere and open in background tabs. Like:
load-url-from-search-on-focus.html?http://example.com:
<!doctype html>
<body
onload="document.title=u=location.search.slice(1)"
onfocus="u?document.location.replace(u):document.write('?search missing')">
Try it.
(data:uri could have been used instead of hosted page, if there weren't those pesky security precautions blocking rendering of top-level datauri navigations :|)
How does Shopify do this? Go to their website, click on the Features link and you'll see that the URL in your browser's address bar says:
http://www.shopify.com/tour/sell-online
Then click on any of the sub links and you'll see that the URL in the address bar changes without using a hash and there is no page flip.
I don't think they are using ajax to change the content because it all appears to be included in hidden divs on the page, but regardless, you can apparently change the URL using client side tricks. Your help is appreciated?
You use the new HTML5 history API to push a new state.
Here's the MDN documentation and a good tutorial.
Beware that doing this is often painful (you have to manage correctly the state of your application) and it doesn't work with IE9. It's almost always combined with ajax : it's the solution to let dynamically loaded content be bookmarkable even while the whole page isn't reloaded or changed.
Look into pushState, but be aware it's not supported in all browsers.
I would like to identify browser tabs (on my domain) using JavaScript.
I mean that if user open several tabs with my website and submit web form only on one page I want to notify only this page, even if user moves from this page.
It should be max cross browsers solution.
P.S. One of the possible solutions is using "window.name" property, but I do not want to use it because somebody else can use it.
P.S-2: I found one more possible solution: using sessionStorage. It supported by FF3.5+, Chrome4+, Safari4+, Opera10.5+, and IE8+. Oooohhh, I need IE7!!!!
Thank you in advance!
I don't think this can be done. Each browser tab that is opened is basically like a new browser instance. Just like if the user opened another browser. One tab knows nothing about the other tab by design. This is how it should be. Can you imagine the implications if a web site developer could add code to their page to "see" what other sites you have opened in your browser?
window.name is the only persistent data element you can use for this purpose, as described your requirements.
I want to notify only this page, even if user moves from this page.
This is impossible. Once a user navigates away from a page, you lose control over that tab. You can't push to a page, it needs to make a server request FROM that page, even if it's ajax.
Using sessionStorage. It supported by FF3.5+, Chrome4+, Safari4+, Opera10.5+, and IE8+.
For IE7 using "window.name" property.
Thanks for reading my question.
I saw Gizmodo & Lifehacker has this feature.
Take a look at this http://lifehacker.com/
When you click link in right sidebar, example (http://lifehacker.com/5835630/apple-launches-itunes-match-beta-for-developers). The address bar show "http://lifehacker.com/5835630/apple-launches-itunes-match-beta-for-developers", it means new page are opened. But contents of current page is not changed, like AJAX load. But the different is: when using AJAX load, we will make request to new page, but address bar is still current URL. And lifehacker.com's address bar shows destination URL, not current URL.
I tried to inspect request, and saw Lifehacker.com make POST request to opened page (http://lifehacker.com/5835630/apple-launches-itunes-match-beta-for-developers), and then render contents, like AJAX load does, but my problem is Why their addres shows new URL instead of URL (or hashbang URL like http://lifehacker.com/#something).
I tested in different browsers, and this feature only work with Chrome & FF, not Opera and IE, so I think is features of Chrome & FF, is it right ?
Thankyou
This is achieved through the HTML5 history API or older hacks that included an iFrame..
See this article on information on HTMl5 History:
http://diveintohtml5.ep.io/history.html
See this demo for the code in question.
You may also want to look at the PJax library that provides this functionality (through the above means)
Is there any way to save browser history?
For example if some elements(enable/disable/color change, etc) on the page getting changed using jQuery and after redirecting to another action if browser go back button clicked the state of the previous page will be wrong.
That's why i am thinking to save history on button click before redirect, theoretically if user click back button state of previous page should be right.
Is there any ideas how to do that or something similar?
I found jQuery plugin called jHistory http://plugins.jquery.com/project/jHistory. Currently i am looking in to this but anyway may be some one come across something similar.
This sounds like a good candidate for the HTML 5 history API, which allows you to manipulate the history in a browser. Mark Pilgrim has an excellent introduction to it, along with instructions on how to detect if a browser supports it and fall back to scripts like history.js if it doesn't.
Chrome, Safari, and Firefox support the history API, while IE9 does not.
Edit: See also this question.
In addition to jquery plugin(http://plugins.jquery.com/project/jHistory) you can use reallysimplehistory JavaScript library