This documentation is for AppPresser 2 only. For AppPresser 3 docs, click here.

In App Browser Links

The InAppBrowser is essential for handling external links that are not controlled by WordPress. External links that aren't loaded in the InAppBrowser can cause users to get stuck at the link destination unable to return to the app. AppPresser tries to detect external links in your site and automatically launch them in the InAppBrowser, however, there are cases where you may need to force a link to load in the InAppBrowser yourself. 

There are a few ways to accomplish this based on what you're working in.

WordPress / HTML

For links you're working on inside the post editor or other sections of wp-admin you can add the class "external" to your links and it will force the link to open in the InAppBrowser

<a class="external" href="http://externalsite.com">External Link</a>

Javascript

The In App Browser will open for any link that uses window.open in javascript. For example, you would add this to your WordPress page or post:

<button onclick="inAppBrowser(); return false;">In App Browser</button>
<script>
    function inAppBrowser() {
       window.open('http://apppresser.com', '_blank');
    }
</script>

For anyone not wanting to have inline functions in your post editor, and would prefer a more jQuery version, you can use something like the following:

<script>
(function($) {
    $('#colophon a').on('click',function(e){
       if( $(this).parent().hasClass('external') ){
         $url = $(this).attr('href');
         window.open( $url, '_blank');
       }
    });
})(jQuery);
</script>

The example above targets the footer menu links, and only links that have the "external" class. You can customize it to your needs, whether it be via the selector used or if it wants to target only links with a specific class. You could just have them all open externally if you wanted.

This is a PhoneGap feature, more documentation can be found in their documentation here: http://docs.phonegap.com/en/3.3.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

In App Browser Options

As of AppPresser 2.5.0 we've made it possible to utilise the InAppBrowser options provided by Cordova to customize the In App Browser that's displayed.

window.open(http://apppresser.com', '_blank', 'location=yes');<br>

Zoomable Pages

Some external sites may be setting the meta tag scale setting and won't let you zoom the viewport.

<meta name="viewport" content="width=device-width, initial-scale=1">

If you want to zoom on such pages you can add the options directly on the link and our app will handle it for you. data-options="location=yes,EnableViewPortScale=yes"

<a href="http://gesundheitstag-altona.de/" data-options="location=yes,EnableViewPortScale=yes">Need to zoom</a>

For a full list of available In App Browser Options please see the cordova docs:  https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/

Debugging inAppBrowser issues

If you are having trouble getting inAppBrowser links to work, there are a couple things you can check on.

  • Check the PhoneGap version you are building your app with, and if it's not working in one version, re-build using a different one.
  • Check your html. AppTheme expects the <a> tag with the .external class to be a direct descendant of what was clicked.

Opening Links in Chrome or Safari

If you would like a link to open a URL in Chrome or Safari instead of the in app browser add  class="external system" to your <a> tag.

<a href="http://yourdomain.com/your-page/" class="external system">my page</a>