FancyBox iframe breaking iOS standalone web apps

[joedanz]

When the 'apple-mobile-web-app-capable' meta tag set to yes, the browser chrome is removed and the app tries to run full screen. FancyBox pulls up an iFrame correctly, but when you click any link inside the iFrame, it busts out of the mobile web app and loads the app in the Safari browser instead.

There is a known fix for links in standalone apps pulling up in Safari, but this fix breaks FancyBox and I haven't been able to make them work together. More details on that fix here: https://gist.github.com/1042026/8b8beac9336fb7f9a8db582e698baa1fc495871f

Is there any way to have FancyBox retain it's functionality within a mobile web app like this and so that it does not take you out of the app and into Safari?

Thanks, -Joe

[fancyapps]

That snippet is designed to fix links on current page and not inside iframe. If you could fix links inside any iframe (try creating iframe tag on your page and test if it works) then there should be no problem - your could apply your fix using callbacks ("beforeShow").

[joedanz]

I created an iframe in the page and applied the script to the page in the iframe. It no longer loads the link in the external safari, but it doesn't load in the iframe either. it seems like it just kills the link altogether. I put up a test of this at http://ticc.net/apptest/ if you are interested in checking it out. You just need to load the link in the ipad, add it to your home screen, and then launch it from there.

I am about to but a global license, and unfortunately this is the only issue that has been giving us trouble. We finally tracked down what was happening yesterday and are now just tryng to find a fix. FancyBox has been great to work with and we looked at a lot of other products before choosing this one. Thanks in advance for all of your help, and for making a great product!

[fancyapps]

Thanks!

If you can edit iframed page, you could try to catch click event, check if it is triggered by anchor and reload iframe parent instead of opening link directly.

[joedanz]

My pleasure.. My JavaScript is not quite as strong as yours.. Any way you would be willing to do this for a fee?

[fancyapps]

I do not own an iPad, so I can not test, but you could try to set <base target="_parent" /> to iframed page or use this snippet -

<script type="text/javascript">
    $(document).ready(function() {
        $("body").delegate("a", "click", function(e) {
             e.preventDefault();
             window.parent.location.href = this.href;
             return false;
        });
    });
</script>

[joedanz]

Thanks for the tip.. I'm actually trying to get the content within the iframe to switch. Wouldn't this code tell the parent window to reload, thus killing the fancybox? And wouldn't the base target also tell it to load in the parent window vs. the iframe?

[fancyapps]

Then maybe reload current window - window.location.href = this.href;. As I do not own an iPad yet, I can not test myself.