We need to implement a mechanism to persist information between web pages in the same session. There is a lot of information on the client-side and passing it back and forth to the server across requests is something we want to avoid. HTML5 local storage is one option.
The other option mentioned was "using a hidden frame where the data is kept". I am not sure what this option really means.
Does it mean keeping a hidden frame that holds on to the data across page requests?
How would this be accomplished? Are there any jquery plugins or sample code I can look at?
What are the advantages and disadvantages?
I am not aware of a way where you can keep data in the main page and use a hidden iframe/frame to persist data. This is because once the main page is reloaded (when you go to another page), everything in the iframe is lost.
You would basically use the main page as your data-storage location. On top of the main page, you would superimpose an iframe. The user would interact with your site through the iframe. From the user's perspective, there is no difference. You can persist information by writing to the parent frame (the main page). Since the main page is never getting reloaded, you can persist data inside it.
I am not aware of any Javascript libraries that do this; I will take a look though.
Keep in mind that this might affect SEO and possibly navigation (not back/forward buttons). Another point, as Guffa noted, is that users cannot share links to your page since the URL in the address bar never changes (all interaction is via the iframe). So when your user sends someone a link, they will end up at the very first page.
You can't keep a frame from one page to another, so the only way to use that is to make the frame cover the window and load the actual pages in the frame. That way you can keep the data in the surrounding page that won't be replaced.
This of course means that you actually never leave the page. The URL in the location bar remains the same when the content changes, so you can't bookmark a specific page or share it with others. Search engines will link to the content pages instead of the frame, so anyone finding your page that way will end up on a non-functioning frame page.
Related
I have a HTML page which I want to display on browser. This is a login page(https://localhost:9000/login). Before loading this over browser page I want to hit another url which gives me another html page . This url is basically to kill the existing sessions.(https:xyz)But this also redirects me to another page which I don't want to display . I want to remain on login page.
I think this is possible using iframes. I am newbie to iframes. Any pointers on how to achieve this?
That's a local link only viewable on your computer.
So you want to load another page, before the login page? If you want to kill existing sessions you can use sessionStorage for that.
There are a few things that don't make sense with this, but it's your project. like you want to redirect to another page, but don't want that page to display. That makes no sense to me.
You want to remain on login page, but when you login, you want to get another html page in the login page?
iframes are probably the worst thing in the world imo... you got so much going on here, but can simplify this so much. A login page to an inner page and then you go from there.
There are a number of ways to achieve the end means here, sessionStorage being one. Just search around here for answers, you can find a ton of them.
Good luck!
iframes have been removed from HTML specifications, you cannot use them in HTML5.
Use attribute target="_blank" in the <a> of this url. It will open in a new tab
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.
On lifehacker.com when a user clicks a article on the right menu sidebar, the article & the page url changes, but the #rightcontainer always stays visible and , you never see it blink on the change of the page url, and when the article is ajaxed in (this is easy),
How would you change the page URL with a DIV staying visible on the page the whole time.
How is this possible? Javascript of some sort? (I think its freezing the browser then doing something, getting the data ready? )
I always thought you couldn't change the page url with javascript because of security issues.
I think you are looking for State Handling :)
It used to be done by adding # at the end of the URL, but now HTML5's State Handling features allow us to change the URL completely (ofc, within our domain)
The answer you need is located here:
https://github.com/browserstate/History.js/
Each url can include the same source as right container it won't refresh/blink as in browser cache.
you couldn't change the page url with javascript because of security
issues
A link can be followed via JavaScript if you require, its not regarded as bad practice (afaik). But there is no need to use javascript it could just be normal anchor/href.
I have a PHP and HTML based CMS. In each page of the CMS, there is a form with a Javascript-based tabbed dialog that switches between a number of DIVs.
From each page of the CMS, it is possible to open a preview page to see the changes made, and then return to the CMS. When the user returns, I would like the same tab page to be opened as when they left for the preview.
My current approach is to change the value of a cookie ("current_tab") each time the user changes a tab.
onclick='setCookie("current_tab", 5);'
When the tabbed dialog is generated, I check for the cookie and set the appropriate DIV to "display: block".
However, I need the cookie setting to be limited to that specific CMS page, and not all of them. If the user changes to a different page, the tab must not be pre-selected.
My current approach is to create a cookie for each page, e.g. for page ID 10254:
onclick='setCookie("current_tab_10254", 5);'
and, as an attempt of cleaning up, to remove that cookie when the page is rendered. But obviousy, this is not going to clean up every cookie that was set, because the user can choose not to return to the form, or navigate to a different page. I fear clutter through dozens of cookies in the system.
Does anybody have a better idea how to do this?
Try to Limit visibility of cookies by changing "path" parameter of cookie.
If structure of your application doesn't allow this, I'd suggest you not to use such approach, cause cookies are usually sent with every request, including requests to static information (images, css).
Why are you worried about removing the cookies? They will expire and remove themselves.
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 .