I have a web page where I have two iframes. I set the url (location) of the iframes in the page onload event. This is done to "delay load" the content. That is, the main page content is rendered first, then the iframe content with e.g. Like buttons, trust logos etc. are displayed. This speeds up the page rendering considerably.
However...
Clicking the back button first removes the trust logo. Then another back button click removes the Like buttons. The third click finally takes the user to the previous page.
Is there any way to avoid the URLs of the iframes to go into the browser history, while maintaining the above functionality?
Thanks!
Avoid using iFrames, if you really want to improve rendering like this, use AJAX. However there are numerous other problems if your page actually renders slow, how large is it, and how is it structured?
Related
Question: With Javascript, can you tell the web browser to begin loading a page, but don't begin rendering it yet?
Issue: A client wants his web page to show listings like a book. When you click on the next button, he doesn't want the next page to immediately load. He wants the book to close (a closing animation) and then load the next page.
Current status: All links go to Javascript. I show the closing animation. Then, I replace the window location. The issue is that there is a clear wait for the next page to load. It would be nice if I could load the following page into cache while the closing animation runs. In other words, I want to make that three-second animation useful time by loading all the HTML, CSS, Javascript, and images for the following page and then all that happens when I set the new location is that it renders.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and is used to load the next page. After the animation, I flip which iframs is visible and which isn't. This is good except that the back button doesn't work properly. If you click back, you go to wherever you were before you went to the website. You don't hide the current iframe and show the one you just hid. If you click back twice, flipping iframes doesn't work. I have to keep a log of your history. Further, I have to hack the back button, which I don't like. So, I'd like to use a built-in cache method if I can.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and
is used to load the next page. After the animation, I flip which iframes is visible and which isn't.
Yes, this sounds like a good approach.
This is good except that the back button doesn't work properly. [...]
I have to hack the back button, which I don't like.
Single Page Applications (SPAs) can't use the back button as originally intended because the entire application exists within a single document.
Partly in response to this, we have
history.pushState()
which is a really good extension to the History API, enabling new "artificial" entries (describing new states) to be added to the browser's history, which, in turn, enables the back button to work exactly as the user might expect it to.
Further Reading:
http://html5doctor.com/history-api/
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
I'm fairly new to web development so I don't have much experience with any of this. I currently have a navbar at the top of my website (made with Foundation), but I don't want it to reload every time the page reloads. I've noticed on several websites that certain parts of the page are kept in place when links are clicked and the url changes. How can I achieve this?
Thanks
There are several ways to achieve this. Using AJAX calls is one of them, iframe another. You could even create a one page application and show/hide elements when certain buttons are clicked. This will however force you to load all the data at once so I won't recommend that (depending on the website).
A small article about how you can use the iframe option.
A small article about the AJAX option, they include a small demo to show how it works.
You can set an <iframe> in your code and have the links in your nav target it. When you click on a link, the <iframe> will load the new content, but the rest of your page will not change.
Normally, html navigation will release the first html page and load another.
But I hope to navigate from one html page to another but keep them in memory both, thus I can apply the document messages.
Is it possible?
Welcome any comment.
Yes and no.
No, you cannot change page and keep the old page in memory.
Yes, you can store the current window.document into a variable and then over-write the entire page with content loaded via AJAX from another page.
This method won't really load the new page though. The url will be the same, the title will be unchanged, really only the DOM will be updated.
You could try to use tabs
http://www.w3.org/Style/Examples/007/target.en.html#tab1
Putting your contentent for each page in a separate tab div and play with the formatting / navigation to simulate moving between pages to make it look to the user they are navigating pages but are really tabbing through a single page.
if you want to use messages (onmessage, postMessage), you can do that with frames, iframes to be specific. One parent window with two iframe windows and they can talk to each other (also over different domains, so the Same Origin Policy doesn't apply) utilizing onmessege and postMessege. If the two iframes dont load a page from the same domain, you will not be able to access the window/DOM
The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.
I have Large.html, which is a web page that has a lot of images and javascript on it which takes a long time to load.
From other pages (a.html, b.html) how can I use JavaScript to prefetch Large.html (and all of the elements on the page) so that I can get the page cached in the users browser to help speed up page loading.
Would I need to use a hidden IFRAME?
You could just load the body of the page, put it into the innerHTML of a div that has 'display: none', and wait for a bit, then make the current div have a display of none and the div with the new page becomes visible.
It may still need to go out and actually download the images, but it should basically be preloaded.
yes, i would use a Hidden Iframe. That will, in general, take care of exercising scripts that might run and load in additional assets on that slow-to-load page.
If you do this, be sure to do it after the load of the a.html page so that you are not stopping the user interacting on this page.
I say if, because you often don't know for sure that the user will load the Large.html page.
Other than that if the large parts of the other page are mostly images, I would load them, and not the entire page (html, css, js, & images) in an iframe.
I've seen too many sites that try to load the entire content (hidden) in an iframe... and in the process make the current page unusable. :-(