I am working on a site where the main part of it is driven by an ajax style navigation system using anchors in the url to define the application state.
On top of this I now need to support IFrames that are loaded on top of this application. The problem I'm having is that the back button breaks if I make use of fragments.
I've created a very simple sample, that isn't using any of the ajax libraries. All it has is a link that adds an anchor to the url and an iframe, with some normal links in it.
If I click then anchor link first, then I click the link in the iframe, I would expect the first back click to take back to the original iframe page and the second click to remove the anchor from the url.
I'm aware of all the various solutions out there (YUI, reallysimplehistory, jquery plugin) and they all work great, but they don't cater for iframes.
I'm also aware that I could add some JS to the framed pages and possibly route all navigation through the parent page, but I'm hoping that isn't necessary.
So the question is, can anyone explain what is going on inside the history object in this sample? Secondly is there anything I can do from the parent iframe to coax the history object to pick up these navigation entries?
Note: I'm only enquiring about FF/Safari/Chrome in this sample. IE needs to looked at separately.
Refer to
JavaScript .hashchange performance. Can it bring any slowdown?
and
How does Gmail handle back/forward in rich JavaScript?
Related
I have a bookmarklet that opens a dialog (in reality an iframe) and extracts some information. When the dialog is dismissed I want to put that information into edit text fields on the original page in the browser (like the way LastPass will automatically fill-in login forms on a page).
Is this possible? I'm thinking that same-origin-policy will prevent this, but maybe there is a way (without installing extensions such as greasemonkey, etc).
Edit: to be more precise: the bookmarklet appends a DIV to the original page; that DIV contains an IFRAME that loads my page; this page fetches some information; once this information is fetched within the IFRAME I want to remove the DIV and (somehow) put that information into the original page.
The issue I face is communicating the information in the IFRAME back to the original page.
What you are looking for are the functions addEventListener and postMessage.
Relevant links:
http://caniuse.com/#feat=x-doc-messaging
How do you use window.postMessage across domains?
I need to know how is it possible using AJAX to navigate between pages like Facebook. When I click a link in Facebook the url in address bar changes and the main content area is reloaded with new content but the navigation list on left, header on top and chat on left side remain intact. It appears that those sections are not reloaded. How this become possible when the address bar changes? please ,if possible give a small example.
You can use libraries such as history.js coupled with ajax calls. This library dynamically modifies the URL as you are clicking around the site. The library is available at https://github.com/browserstate/History.js. And a great demo is available at http://rypit.me/demos/isotory/tutorial/history.js.html
Overview
I've set up a site using jQuery Mobile. The problem I'm having is that when I enter the site from an interior page (like the blog pages) and click on the navigation buttons in the header, I can go back to the homepage but then none of the ajax/hash-based navigation links work. In my header navigation I've linked the left-side navigation buttons directly with hrefs, not using data-rel="back". I'm not trying to use the buttons to imitate the browser's back button, but rather for absolute navigation. I've tested this on the desktop in Chrome and Firefox and on an iPhone running iOS 5 in Mobile Safari; the behavior is the same in all browsers.
Edit: (Note specific questions below in bold italic.)
What works and what doesn't
For example, if you go to the interior page http://slawson.org/blog/ and then click the < Kim button in the header to go back to the homepage, then you can only go to absolute links (like Blog) but none of the hash-based links (the other links under the "Portfolio" and "About" headers) work... clicking on the links does not fire a page transition, instead the links just blink and do nothing.
If you enter the site from the homepage — http://slawson.org/ — or one of the subpages of the homepage — like http://slawson.org/#web — this problem does not occur.
index.html — contains most of the other pages that use hash-based navigation (these don't work), e.g.:
Web Sites
iOS Applications
Print Publications
Logos & Branding
...
blog/index.html and blog/.../*.html — regular pages loaded via JQM's ajax loader (these work).
Question
Is there a problem with JQM and ajax navigation when entering sites from interior pages, or is this something that can be fixed by restructuring things or adding some jQuery somewhere? I'd like to avoid breaking every page into a separate html file.
Versions
I'm using jQuery 1.8.2 and jQuery Mobile 1.2.0.
Edit:
I looked at the JQM multi-page template docs and at these related StackOverflow questions:
jQuery mobile page navigation behaviour
Facing an issue in jquerymobile's multi page template stucture
JQuery Mobile - link from external page (SinglePage-template) to an internal page (MultiPage-template)
Things I've tried:
data-url
I tried adding data-url to the multi-pages in index.html, like so:
<div data-role="page" id="web" data-url="index.html#web" data-title="Kim Slawson | Web Sites" class="shorter-list-items">
but that didn't help.
data-rel="external"
I tried adding data-rel="external" to links to the homepage, like this link on the navigation button on the blog page:
Kim
but that didn't help either.
data-ajax="false"
I tried adding data-ajax="false" to links to the homepage, like this link on the navigation button on the blog page:
Kim
This works (i.e., you can go to the homepage, then all of the multi-pages work) BUT the transition does not fire going to the homepage. Is there a way to add a transition to this link, perhaps by giving it a class and then using some jQuery to bind to that class to fire the transition? or is there a better way? (Of note, the back button works fine after I add data-ajax="false" to the link to the homepage. Clement Ho's answer here implies that adding it breaks the back button, but I'm not seeing that)
The problem is that the hash-based pages don't exist on the page when you're clicking the links to them. (<div data-rolw="page" id="#web">...</div> isn't there)
If you have a back-end framework set up, you could return the the hash-based pages, along with the requested page, whenever a non-ajax (the initial) request is made. Then those pages will be in the DOM no matter what page is loaded first.
The other alternative is, like you said, to break every page into its own file.
I'm trying to get a web page in a window within a web page, so basily what I want is something like a standed os,
you have a exe it opens with in a window, well I want that but in HTML5
Would I use Ajax?
Anything would be helpful at this stage!
Thanks jrop
For your problem you don't need HTML5. You can solve it by using jQuery.
jQuert window plugin (You can choose one of them depending on your need):
http://fstoke.me/jquery/window/
http://hernan.amiune.com/labs/jQuery-Windows-Engine-Plugin/jQuery-Windows-Engine-Plugin.html
http://swip.codylindley.com/DOMWindowDemo.html
http://pierrebertet.net/projects/jquery_superbox/
If you want an actual window then you would use open. If you want a pseudo-window inside a page, then you would use <iframe>. If you don't want an actual page, but just a chunk of HTML then you would use DOM manipulation to create the elements in the page (and possibly Ajax techniques to get the data over HTTP if you don't have it in the page already).
I am not trying to track clicks or anything like other people - I just want to put a browser within a browser that can go back, forward, refresh, accept user-entered URLs, and store bookmarks. Can flash/silverlight/ajax/whatever do this? If so, how?
How about:
Solution 1:
Create or use an existing ActiveX Web Browser control.
And let your web/page host that ActiveX, or host multiple controls.
Solution 2:
Put an iframe inside a UserControl, a textbox and a go button.
Get the user provided url from textbox.
Change the src of the iframe when user clicks the go button.
_
<iframe id="iFrame" name="myFrame" src="http://bing.com"
width="100%" height="300" frameborder="0">
<p>Does your browser support iframes?</p>
</iframe>
--EDIT--
This is in response to your comment; you posed 3 questions:
For 1, thats correct, ActiveX works for IE, more specifically for Windows; there are ways you can install ActiveX for different browsers, but it(the ActiveX) would require windows OS. See this.
For 2, try handling that using JavaScript; something like following within iframe block.
<p>Back</p>
Checkout these examples.
For the third one, if I understand you correctly then you can always parse the url when user clicks onto the Go button; and respond accordingly before rendering the page.
flash can do basic html (AFAIK) not sure about silverlight.
you will struggle to do it with javascript/iframes. Especially back/forward/refresh buttons. If you are on the same domain you have some control over the iframe, but once it leaves your domain, you lose control
Would using an iframe or an object with type="text/html" be useful to you in terms of being able to embed a page within a page? Either method effectively permits loading a separate page within a page with little side-effect.