overwrite, cancel or invalidate a prerendered page - javascript

In HTML you can now use prefetch, *prerender like this
<link rel="prerender" href="https://www.adorama.com/">
This prerenders the next page behind the scenes
This is used a lot in blogs and e-commerce listing pages to pre-render the next pages..
But the problem is, What if after the prerender successfully ran, and now the user made a change in the page that alters the way the next page (the one that is already pre-rendered) behaves.
How can we invalidate that prerendered page, so when we view it first it will request a new page and not show the pre-rendered page.
We don't want to overwrite the link, Because we want to benefit from client or CDN caching..
*(See a nice talk about this from Yoav Weiss - Hinting the browser)

The only way I can think of now, is to have logic in the pre-rendered page to check for page visibility API and we can check if visibilityState === prerender and then add a event listener for on visibilitychange and on the event that visibilityState === visible we can check if the stored values (settings) are still the same and if not we can run the logic needed to render page correctly or simply refresh the page.....

Related

Can you stop a prior page from reloading when "back" button is clicked?

Doing some Intranet development. The design approach uses a basic HTML framework populated with an ajax call (via jQuery) to populate the page. We've standardized on Chrome for Intranet access. The intranet allows the user to open PDF documents linked from the page in the same window, and then use the back button to return. Our old "static" page approach retained the prior page contents - the new dynamic approach reloads the page. How can we retain prior page content?
Research has found similar problems, but not a clear answer. We've tried checking for an existing element in the onload() event; doesn't work because the page load is already triggered before that code gets evaluated.
The code is working correctly - our desire is to return to the already rendered page.
No errors. Getting page reload with the back button when we want to return to the already rendered prior page.
You could modify the url via the history api when you are changing the page content. This should be enough as history gets modified so the back function would work properly. However if this doesn't work you can use the url to determine what to show up on the page.
Here's an example: https://css-tricks.com/using-the-html5-history-api/#pushState-example

Preventing back and forward buttons from reloading the page in a single page app

I have a single page app in which the page is never unloaded. I am using the # in the url and using javascript to detect the hashchange and then updating the UI using JS and AJAX... and I do not want the forward and back buttons to make an extra request to the server.
Currently, the first time the user initially comes to the site, a server request is made (which is OK)
Processing by MyController#index as HTML
My goal is for this server request to only happen once during the users time at the site...every time they click on any other link, I just use the "#" in the url to prevent a new server request... so all my "a" tags look like something like this
<a href="#page1/
The issue I am having is that clicking the back and forward button triggers my JS hashchange listener (which is what I want)... but it also calls
Processing by MyController#index as HTML //I DO NOT WANT THIS TO HAPPEN
Here is the functionality I am currently getting
1.) user navigates to mydomain.com
2.) "Processing by MyController#index as HTML" is launched and a server request is made (THIS IS OK)
3.) User clicks a link and now the url reads mydomain.com/#page1 and I update the view with JS (THIS IS OK)
4.) User clicks a link and now the url reads mydomain.com/#page2 and I update the view with JS (THIS IS OK)
5.) User clicks BACK and now the url reads mydomain.com/#page1 and I update the view with JS (THIS IS OK)
6.) a server request is AUTOMATICALLY made to reload the page ("Processing by MyController#index as HTML" is called again) (THIS IS NOT OK)
How do I prevent step 6 from occuring when the user clicks the back button??... I just want the url to change and for me to update my UI via JS and no server request
Also, I am using ruby on rails if this helps at all.
What you're trying to do is impossible. You can't override the default behavior of browser buttons like back/forward/stop/refresh, etc.
What you could do is create your own Back and Forward buttons (and place them on the actual page, itself) - and code their event handlers accordingly to make your AJAX calls.
This work fine for me
jQuery hashchange event
Finally got it figured it out. For some reason, Turbolinks was causing it to reload the page whenever the back or forward button were clicked. I removed the Turbolinks gem from the app and now its all working perfect.

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.

Triggering multiple individual JavaScript functions via URL without a page refresh

I'm building a simple webapp using NFC(near field communication), which involved certain tags being programmed with the URL of my website + a hash that will trigger a specific JavaScript function.
For example, "www.website.com/index.html#hide/one" will hide the element labeled "one" on the webpage. Simple enough, right? I thought it would be.
I've since learned that when you tap an NFC tag, it opens the URL in a new webpage/tab. I think this could be averted if my webpage checked to see if there are any other open pages and closes them, though.
If there's a better way to do this(trigger JavaScript functions on a webpage via a URL to that webpage), please let me know. It's important to note that there are 8 tags(elements) in total, and they all have to be triggered for the game/app to end, which requires it all to be done on the same page, preferably without refreshes(although I could probably rig something up using localstorage so it could be refreshed).
Thanks in advance, I'm just not sure how I would proceed here.
-Mitchyl
EDIT - I should mention that I already am using backbone.js for my routing needs. It's perfect for my situation at the moment,
What you need is a hash tag routing libary. http://projects.jga.me/routie/
This will run when your app page loads and read the hash, diverting the logic of your code to do something based on the hash tag, thus you make your items remove on the page in your code logic. No need for lots of pages.
But!
If the url launcher on the device launches new windows each time an item is detected, that is a problem since you can't close those windows, other than from the window itself.
Solution
The app has a main window for the game, each item is stored in local storage, You can use the local storage event system to detect if another page changes an item, and update the UI in real-time.
addEvent(window, 'storage', function (event) {
if (event.key == 'item1') {
item1.innerHTML = event.newValue;
}
});
When NFC launches a new window, display user feedback that states they have completed a task of the game then close it using a timeout.
Below that window will be the main page window with the update displayed.
Done properly it will work brilliantly. You can also add a nice x close button on the pop windows as tasks are completed.

Render optionally needed content only when needed on dynamic JS page

I am building a web application which I intend it to work like a traditional 'software': as few page reload, and page redirect as possible.
My solution to page reload and redirect is to have them as 'tabs' within the app, so when you click on another tab, the div of your current content will shrink to 0 width.
My question is: how do I prevent the content (writtent in JS, w/ PHP backend) in a tab to load unless when it's clicked on?
(Assuming this is what I should do to reduce unnecessary load)
Just don't load it until the link/button/etc. to the tab is clicked.
See also the jQuery tab implementations.
If your back-end is in PHP, you should control what you send to the client from there.
By the time the js gets the code, it is too late to control what not to load. You can hide it, or remove it, but it has already been loaded.
So, to reduce unnecessary load, and as a good practice, you should only send to the client the active 'tab'. That has to be done in PHP in your case.

Categories