2 Replies Latest reply on Mar 7, 2017 7:30 AM by jeffreyp64846165

    Conflict between "stay-in-webview" and "allow-navigation"

    jeffreyp64846165 Level 1

      This may be an iOS issue only—I have not tested Android.

       

      Using the "Hello World" app as built by PhoneGap Desktop as a starting point.

       

      I had to change the CSP meta to <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-inline' 'unsafe-eval'"> to get to "Device is Ready." (Based on the discussion here.)

       

      I've added a link to external content (<a href="http://www.google.com">Link to external content</a>) to the index.html page, and it works as expected, opening in the default browser (Safari).

       

      In config.xml, changing <preference name="stay-in-webview" value="false" /> from "false" to "true" has no effect. (So has this preference been deprecated, and where links open now controlled exclusively by the "inappbrowser" plugin? If so, why is my link opening in the browser and not the app? I don't really care, because I want them to open in the browser …)

       

      My app will eventually have embedded YouTube videos. When I add

          <preference name="AllowInlineMediaPlayback" value="true" />

          <preference name="MediaPlaybackRequiresUserAction" value="false" />

          <allow-navigation href="*youtube*" />

          <allow-navigation href="*ytimg*" />

      to config.xml, I can see and play embedded YouTube video in another page in my app, but my link to external content stops opening in Safari, and begins opening inside the app (with no way back, etc.). I've troubleshot it down to the point that including <allow-navigation href="*" />  (I know, not recommended) inside config.xml causes my links to open inside the app. Removing the <allow-navigation> lines restores opening links in the browser, but makes the YouTube content "not there." (Which makes sense, I think, since there's nothing in the config xml allowing navigation to YouTube.)

       

      So I guess my question is, in 2017, using PhoneGap Build (cli-6.5.0 (4.3.1 / 6.1.2 / 4.4.3) how do I allow navigation and open external links in the browser?

      I suspect I can "whitelist" *youtube* in the CSP somehow, but I've not found out how.

        • 1. Re: Conflict between "stay-in-webview" and "allow-navigation"
          jeffreyp64846165 Level 1

          OK, I can open a link in the browser (and view YouTube) using

          <a href="#" onclick="cordova.InAppBrowser.open('url', '_system');return false;">link text</a>

           

          but replacing a bunch of links across dozens of pages is going to be time consuming. And that doesn't fix the issue of links inside framed content, etc. There must be a better way!

          • 2. Re: Conflict between "stay-in-webview" and "allow-navigation"
            jeffreyp64846165 Level 1

            Answering my own question

             

            Keep

                <preference name="AllowInlineMediaPlayback" value="true" />

                <preference name="MediaPlaybackRequiresUserAction" value="false" />

                <allow-navigation href="*youtube*" />

                <allow-navigation href="*ytimg*" />

            in the config.xml. I never found any other/better way to embed/play YouTube inside the app, even after editing the CSP to allow the domains. No need to edit any of my YouTube links. Good.

             

            To solve the links opening in the browser vs in the app, the smart JS fellow down the hall wrote this for me:

            <script type="text/javascript">

            $('a').click(function(e) { 

              if (this.href.substr(0,4) === 'http') {

                e.preventDefault();

                cordova.InAppBrowser.open(this.href, '_system');

              }

            });

            </script>

            To paraphrase his explanation to me, it binds the <a> tags to use cordova.InAppBrowser.open(this.href, '_system')

            The 'if' statement looks for 'http' at the beginning of the link. If that isn't there, the link is internal (for app navigation usually), and the link opens normally, inside the app.

             

            The script is placed at the end of the <body>, after the jQuery and cordova.js links.

             

            So far, so good. No need to change any of my regular <a> href="" links. Elegant and easy.