7 Replies Latest reply on Sep 12, 2016 5:47 AM by RG2 Branched to a new discussion.

    Cordova inappbrowser external links

    RG2

      I need to update my app  with the new link sytax for the cordova inappbrowser plugin

      I currently am using window open

      for example:

      <a href="#" onclick="window.open('https://plus.google.com','_system', 'location=no');

         return false;"><img src="images/google+.png" alt="Google+" width="40" height="40" title="Google+"></a>

      this way is still working fine with my Apple devices  - the inappbrowser allows me to navigate back to my app.  This is not working in the Android version so that's why I am switching to the  recommended var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');

       

      But I am confused by how it fits within the html - do I still keep <a href="#" onclick= ?

       

      If I could see an example of a link within the context of an html page... I will be good to go. I have searched online but I haven't found any examples.

        • 1. Re: Cordova inappbrowser external links
          VectorP Level 4

          You can still keep the (old) onclick attribute, just replace the 'window.open(...)' by the 'cordova.InAppBrowser.open(...)'.

          Alternatively, you can assign the latter to the former, as explained in the plugin's docs.

          • 2. Re: Cordova inappbrowser external links
            RG2 Level 1

            OK.

             

            I have this is the head

             

            <script type="text/javascript">

             

             

                // Wait for device API libraries to load

                //

                function onLoad() {

                    document.addEventListener("deviceready", onDeviceReady, false);

                }

             

             

                // device APIs are available

                //

                function onDeviceReady() {

                    // Now safe to use device APIs

               window.open = cordova.InAppBrowser.open;

            }

                </script>

             

            this in html

             

            <a href="#" onclick="var ref = cordova.InAppBrowser.open('https://plus.google.com','_blank', 'location=yes');

               "><img src="images/google+.png" alt="Google+" width="40" height="40" title="Google+"></a>

             

            Is this the correct syntax?

            • 3. Re: Cordova inappbrowser external links
              VectorP Level 4

              1. Where is your function 'onLoad' called?

              2. What do you need the part 'var ref=' for? Are you going to use that reference anywhere?

              3. If you already assigned 'window.open = cordova.InAppBrowser.open;', why would you then still specifically call cordova.InAppBrowser.open() instead of keeping your old code?  Overruling 'window.open()' is intended to be able to refrain from changing the code!

              • 4. Re: Cordova inappbrowser external links
                RG2 Level 1

                So basically what you are saying is all I needed to do was to leave all the html links exactly as they were and just add the following in the head?

                 

                <script type="text/javascript">

                 

                 

                    // Wait for device API libraries to load

                    //

                    function onLoad() {

                        document.addEventListener("deviceready", onDeviceReady, false);

                    }

                 

                 

                    // device APIs are available

                    //

                    function onDeviceReady() {

                        // Now safe to use device APIs

                   window.open = cordova.InAppBrowser.open;

                }

                    </script>

                 

                 

                And to answer your question -  the onLoad is called in the body...

                <body onload="onLoad()">

                • 5. Re: Cordova inappbrowser external links
                  RG2 Level 1

                  Just wanted to amend my last post. I also would like to know what is the correct behavior for the inappbrowser on an Android device.

                  I have tested for links to Facebook, Google+ and YouTube using the method for cordova.inAppBrowser.open function without the var ref. Both the Facebook and Google+ landing pages have an "X" on the page header (not status bar) to close - when closed the app page where the link originates is shown. Also, if I use the back button on device, the same action occurs.

                  However, when YouTube is clicked it seems to use the YouTube app.

                  The same goes for Google Maps for both I have to use the devices back button to return to my app.

                  When I click links on the app that I have not used the cordova.InAppBrowser.open function I do not have the "X" to close in the header - I have to use the back button on my device. But otherwise the links are active. So my question really is....is the "X" to close the external browser pages the correct action the for the plugin on Android?

                   

                  In comparison, when I visit an external link on my iPhone (and I have not updated to the cordova.InAppBrowser.open function)  a message appears in the status bar to return to the app which is more intuitive than the action on the Android device.

                  • 6. Re: Cordova inappbrowser external links
                    VectorP Level 4

                    Yes, you could leave code as is and assign cordova.InAppBrowser.open to window.open

                    Yes, the behaviour is correct as described.

                    • 7. Re: Cordova inappbrowser external links
                      RG2 Level 1

                      Thanks for help.