jQuery mobile and iframes to load external websites
I'm using some kind of modal window with an
iframe to load external websites into my webapp. If somebody clicks an external link, the modal window will pop-up and the source of the iframe changes to an URL.
In my example i'm using Google as an external URL:
- <a href="http://www.google.com/" rel="external" data-ajax="false">Link to Google.com</a>
My modal window:
- <div id="modal">
- <header>
- <span class="close">Close</span>
- <h1>External webpage</h1>
- </header>
- <iframe id="external" src="about:blank" width="100%" height="100%" style="background:#FFF; overflow:scroll"></iframe>
- </div>
My JS to actually open the modal window:
- // Opening
- $('a[target*="_blank"]').removeAttr('target').addClass('ExternalLink');
- $('a.ExternalLink,').click(function() {
- $('#external').attr('src',this);
- $('.ui-page, .ui-body-a').hide();
- $('#modal').show();
- $("html, body").animate({ scrollTop:0 });
- return false;
- });
- // Closing
- $('.close').click(function() {
- $('.ui-page, .ui-body-a').show();
- $('#modal').hide();
- $('#external').attr('src','about:blank');
- });
The problem is when hitting the close button jQuery mobile keeps showing the loading screen with the spinner. The iframe doesn't seem to work at all on mobile devices
(iOS 4.3.1 + iphone 3gs & HTC Desire HD with android) but it does work in a webbrowser on a PC.
Does anyone of you had issues with using iframes and jquery mobile too?