How to preload and cache URLs/links using JavaScript? - javascript

I have a signup page that has links to 3 different pages. I want to preload all 3 of those destination pages while the user is still on the signup page. This way, the user does click it, it will load immediately.
Is it possible to do this using AJAX or an iframe and have the contents of the URL cached to by the browser?

Now chrome supports dns prefetching. But it is pretty new and not all browsers supporting it.
You can load all the resources(scripts, styles, images) in the upcoming pages in your signup page dynamically. In this way browsers will cache the resources. And, if you are using partial templates, you can preload that also.

This can be achieved with ajax.
On page load start loading the three pages, as soon as you receive each html file place them in three different hidden divs, when the user clicks a link hide the correct div. Remember to check what happens if the user clicks a link before you get your html back

Related

Tabbed Page layout lost state when when refreshed

We have designed the application with tabbed pages layout.
Tabbed Page Style
the tabs are page and are created on click of menu, these are and added in parent container as child DOM element,it is a new form which has input elements,we could have many tabbed pages at a time. my application is in Spring MVC ,PostgresSQL ,Jquery.
What happens when refreshed, lost all the added dynamic new tabs (tabs are pages and we lost the current state).
I could share the reference code if required.
Please suggest how could I manage the state of application.
Window reload/refresh is a pure browser event that ends the execution of the page, you can't really have script continuity after it.
One option is to attach an alert to window.onbeforeunload informing the user that the content will be lost if they reload - this will work with closing the window and refreshing it.
If, however, you need to be able to reload (eg, to load fresh data in the tabs) while preserving tabs, you can use window.onbeforeunload to prompt the user whether they want to save the data/layout before closing, and if so, execute an AJAX call to the server, where you save the tabs (associating it with the session). This would mean that on loading the page you need to first check if there is tab data associated with the session, and load from there.
Other option - and this would be my preference - is to use window.localStorage to save the data on user's disk, and on page load check if there is data in localStorage. It has pretty wide browser support at this point, and there are good libraries that make using it a breeze. I have used store.js and can vouch for its ease and reliability.

Load 2nd web page in background to get content from this web page

I couldn't find anything about this topic, maybe because I'm not a good english speaker and can't find the right words to search for in google therefore.
I'm currently working on an Chrome browser extension which enables me to search for user accounts on a specified web page by using the context menu. Example: If I select the text name123 on any webpage and click the context menu entry, a new tab http://www.webpage.de/user/name123/ is opened.
Now I want to extend the extensions capabilities: I want to search for email addresses, too. For that I can use http://www.webpage.de/search/name123#mail.com/ which brings up a list of all user with the email address name123#mail.com. From there, I could extract the link to the user account as follows:
document.getElementsByClassName("xyz")[0].href
My question: Can I skip the loading of http://www.webpage.de/search/name123#mail.com/ and the "extraction" of the url to the user account? Respectively, can I hide the procedure of opening this additional web page? Does JavaScript support any kind of "preloading" of a webpages content, without being displayed in the browser?
If you can parse the required link from raw HTML, you can fetch the page via an XMLHttpRequest in the background page, examine the result and then open the real profile page.
If the page is dynamic and you need its scripts to run before you can extract the link, you can load it in an iframe in the background page and examine it.
You can do it.
Add permessions to your manifest.json file: 'http://www.webpage.de/*'
Create neccesary ajax requests from background script.

How to 'un-cache' ajax-loaded html when user leaves page

Right now, when a user clicks on a link on my site, I use ajax to only replace the content in the main frame (the header and a sidebar need to keep state across pages, so I don't want to reload them). I use pushState and popState to alter the url bar.
I explicitly do not cache the ajax content and my site works fine--but it's a bit too slow-feeling, particularly on 'back' commands.
If I do cache the xhr html requests, then the site works well internally. However, if a user enters a new URL and leaves the site, if he/she hits the 'back' command, only the unstyled, header and side-bar-less main view content will be pulled from the cache and the site won't display properly.
Is there any way for me to have caching internally but flush the cache if the user leaves the page?
I think I understand your description now.
When I visit /page1.html on your site then the downloaded HTML has main content + header + sidebar.
When I click a link to visit /page2.html, AJAX loads the page and the downloaded HTML has main content ONLY.
So, at this point the cache contains a full /page1.html and a partial /page2.html
Now, when I leave your site and then return with the back-button, the browser grabs /page2.html from cache. But that is only a partial page, and your site "breaks".
Ideally you want the browser to grab partial content only when requested with XMLHttpRequest.
Also, it would be nice if both the partial and full pages could be cached.
pjax addresses this issue by appending a _pjax=true param to the URL query in the AJAX request. I think this should just work in most scenarios.
NOTE that you don't add this param to the URL that you pass to pushState().
An alternative to this would be to ALWAYS download the full page, and then extract the #main-view when using AJAX.
Of course, you could make this someone else's problem by switching to PJAX (you'll need to use the fragment option).
Another JS lib that handles pushState() for you is my HTMLDecor project. With HTMLDecor, your pages only contain main content + a <link> to another (presumably shared) HTML page that contains the header / footer / sidebar. HTMLDecor adds these to the page from within the browser. When the user clicks on a link to browse to another page, HTMLDecor uses AJAX and pushState - no configuration needed. Of course, if the browser doesn't support pushState then a normal link navigation occurs.

Hyperlinks to download files without stopping the current page load

I've got an ASP.NET page that takes a long time to download and returns partial results as it's loading (as per my previous question). On the page I have some links to download files, ie. the response headers contain "Content-Disposition: attachment", so that the browser doesn't navigate away from the page. However, if the user clicks one of these links while the page is still loading it stops loading - normal behaviour, but not what I want in this case. I can get around that by adding target=_"blank" to the links, but this momentarily opens a new window and the closes it again (once the browser realises it's an "attachment"). Is there any way to avoid having those links stop the current page load without this new window trick? JavaScript is OK.
You could put a hidden iframe on the page and target that. (or use javascript to generate one dynamically).
Not sure it if will help, but try to add an iframe to the page and have your links do document.getElementById('your_iframe').location = 'your_url'
You could try a meta refresh
<meta http-equiv="refresh" content="2;url=http://path.to/file.download">

playing audio on a web page without interruption by page reload

I want to create a web page that contains an (Flex/Flash) audio player that doesnt get reloaded when the page reloads. Currently, i am popping out the player in a new window. Please check http://www.paadal.com to see it in action.
What i want to achieve is to have the player in the same window, but it shouldnt reload. I am sure many of you will say use AJAX to prevent reloading of page like songza.fm. But the problem is search engines cannot index AJAX applications. This is true for a full fledged Flex app as well.
Is there any way to have the player in the same window? but not reload.
Thanks
Just add Ajax to existing page hierarchy, change each link to ajax call after page load (with javascript) and only reload content of some container. If you do it that way, search engines (and users without JS, with mobile phones for example) can access your page, and users with JS enabled can get bonus as music player
No, you cannot have a single element exempt from a page-reload, not without loading portions of the page via asynchronous calls to the server. When a window refreshes, it flushes the DOM out, including your mp3 player.
saying "searching engines cannot index AJAX apps" is totally dependent on how the application is written, there are plenty of ways to write an application that is still spider-able and plenty of other techniques for indexing (like www.sitemaps.org implimented by most major search vendors)
You can not maintain anything in a browsers memory after leaving the page (which is implied by a page reload)
For your use, it sounds like using old HTML frames/framesets could easily solve your issue, with a hidden frame containing your audio and the rest of your site in the main frame window.
It depends on the design of your website. You can us a standard html background sound, embedded media player or flash player on your main web page. The others pages will have to be used as a single pop up layered into each other. this will cause your music from the main page to play and allow you to navigate throughout your website because you linked the popup pages. To return to the main page use a close window script .

Categories