Internetagentur

iPad - Stay in WebApp (fullscreen) when links in embedded iframe are clicked


Situation: For an event the customer wanted an iPad WebApp which runs in fullscreen mode (opened via home screen). The customer wanted also that the user is able to browse the company website from within the WebApp without leaving it. Therefore I embedded an iframe which loads the website. The problem is that by default if a link is clicked in the iframe, the WebApp is closed and the link is shown in Safari.


Solution: After struggeling for a long time I came up with the following Javascript based solution. The idea was to bind a click event to all links in the iframe which prevents the default behaviour and instead modifies the src tag of the iframe. Because this lead to memory problems when clicking long time through the website it was necessary to destroy and recreate the iframe each time a link was clicked. Of courese both WebApp and Website must be served from the same domain because of same origin policy).

Summary: This solution worked quite well in landscape mode. In portrait mode for some reason part of the website was hidden and the user was not even able to scroll there.

 

****Initially load iframe with jquery Mobile if page is shown*****

$('div#someId').live('pagebeforeshow',function(event, ui){
          loadIframe('');
 });

****Bind click event to links in the iframe initially and each time a link is clicked and an new page is loaded *****

function stayInWebapp(){
          if(("standalone" in window.navigator) && window.navigator.standalone) {
                $('#theiframe').contents().find('a').click(function(event) {
                            var dest = $(this).attr("href");
                            event.preventDefault();
                            loadIframe(dest);
                        });
            }
            return true;
 }

****Destroy and recreate the iframe each time the src changes and add an load event to bind the click event to all links inside *****

function loadIframe(dest){
            node = $('#theiframe');
            if(node){
                node.remove();
            }
            $('<iframe id="theiframe" src="http://www.thedomain.de/'+dest+'"></iframe>').appendTo('#website');
            node = $('#theiframe');
            node.load(function() {
                    stayInWebapp();
                });
        }

***html source code ****

<div id="container">

<div data-role="page" data-add-back-btn="true" id="someId" data-theme="b">

<div data-role="header" data-theme="b"> <h1></h1> </div>

<div data-role="content" id="website" >

<iframe name="InlineFrame1" id="theiframe"></iframe>

</div>

</div>

</div>