jQuery Mobile + iframe causes the parent page to jump to the iframe when a link is clicked

[JamesNK]

Clicking a link in jQuery Mobile when the page is embedded in an iframe causes the parent page to jump to the top of the iframe.

[toddparker]

We'll keep this in the tracker but this is sort of an issue with demoing mobile on a desktop browser, right?

[JamesNK]

Yes. Overall it works quite well and the jQuery Mobile page inside the frame looks perfect, the only issue is the jump to the iframe when navigating.

+1

[scottbw]

I've seen this in Safari - clicking back on a page inside an iFrame moves focus on first click, on second click it triggers the back function on the top frame instead :-/

However, just editing the JQM history function from window.history.back() to use self.history.back() instead seems to fix it.

[scottbw]

D'oh my mistake, using "history.back" instead of "window.history.back" makes it work on Safari.

[scottbw]

Actually, scratch that. Using JQuery Mobile for multiple apps in iFrames shows up some very strange behaviour when it comes to the "back" button.

It works fine in Chrome (apart from the jump)

In Firefox, if you have two iFrames with jQM content, the back button affects a change in whichever one you changed last and NOT the one where you actually clicked.

In Safari, back behaves in a very odd and erratic way. Sometimes it works, sometimes it doesn't (hence my false positives above).

Ouch.

I've tried replacing history.back with:

var url = $.mobile.urlHistory.getPrev().url;
if (url === null || url == "") url = $.mobile.firstPage.attr("data-url");
url = "#" + url;
$.mobile.changePage(url, "slide", true); 

Which almost works, except if you have more than two levels, you just ping-pong between levels two and three and can never get back up to the first page.

[toddparker]

Thanksfor looking into this. If you find a workable solution, let us know!

[scottbw]

No worries, I'd love to solve this one!

I've got a solution for now using:

var url = $.mobile.urlHistory.getPrev().url;
if (url === null || url == "") url = $.mobile.firstPage.attr("data-url");
url = "#" + url;
$.mobile.changePage(url, "slide", true, true, true);

This seems to work fine in Safari, Chrome and Firefox on Mac.

[SorraTheOrc]

In terms of use case I'd like to point out that this is not just an issue when demoing in a browser.

Projects like Apache Rave (Incubating) are building web based portals that use W3C Widgets and OpenSocial gadgets as the "portlets". It is reasonable to expect some of these to be built with libraries such as JQueryMobile.

[toddparker]

@scottbw - If you work this out, please post a pull request and we'll takea look at adding it.

[scottbw]

@toddparker will do.

[dacosta-rafael]

i have an or <iframe> page. how can i get links on the iframed page to target the parent when linking with jquery mobile data-rel="dialog" data-transition="pop"

[toddparker]

So you have JQM running in an iframe and want a link inside the JQM frame to target the parent window? Does the target attribute work?

In any case, you're not going to be able to cause a transition in the parent window. There a lot fo complexity going to make transitions work in JQM.

[dacosta-rafael]

target attribute fails and is not as intuitive to the jqm

i need to display a page with a moving carousel, on slide -- not changing page but showing item in carousel on slide only (w/o page reload). in the carousel the items are then linked to a jqm dialog. how can i do this w/o iframe or embed

[toddparker]

This just doesn't seem like an issue per se. Please post this to the support forums instead.