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 *****

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

****Bind click event to links in the iframe *****

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 = $('#webframe');
            if(node){
                node.remove();
            }
            $('<iframe id="theiframe" src="http://www.zm-i.de/'+dest+'"></iframe>').appendTo('#wrapperdiv');
            node = $('#theiframe');
            node.load(function() {
                    stayInWebapp();
                });
        }

COMMENTS

 
    No recent messages have been posted.

Please enter your message:

* = required field
  •   
  •   

  • Please enter here the word as displayed in the picture. This is to prevent spamming.
    CAPTCHA image for SPAM prevention