5 Replies Latest reply on May 2, 2017 5:24 AM by howard_owens

    inappbrowswer and navigation

    howard_owens

      I've got three use cases for external links I've got to find out and not finding the right documentation or examples so far that can help me understand my best opens.

       

      Case 1: I have a couple of external websites that are part of my family of sites. I want to link to them from within my app but provide navigation back to my app that looks pretty seamless to the overall user experience ... almost like the user doesn't know he or she left the app.  Using _self or _blank leaves me only with the navigation on the current site.  I've seen something about injecting JavaScript and CSS ... is that my best option?  Or is there something I'm missing.

       

      Case 2: Or stories often provide external links ... I want these to open _system, but since I have other use cases for URLs, I can't do this globally for the app, but I don't know where these links are going to appear or what they contain.  The best idea I've had so far is come up with some JavaScript, if I can, that deals only with URLs in the #headlines DIV.  Viable strategy? Anything better?

       

      Case 3: When I do a roundtrip with my server API on a form submission, I want that essentially to be _self.  Nice think about my API is I can do any HTML on this response page I want, so if I just use my regular in-app navigation, will it just work as if it's not an external page?  I can test this tomorrow, but thought I'd ask ... but the real question, given the other cases, am I going to run into conflicts.  What's the best way to avoid those conflicts?

       

      Thanks ...  I get good help here, so I thought I'd throw these questions out before I spend a lot of time tinkering only to hit deadends.

        • 1. Re: inappbrowswer and navigation
          kerrishotts Adobe Community Professional
          1. Use cordova.InAppBrowser.open('http://apache.org', '_blank'); -- this will display a web view over your app, and provide the user with the ability to close it when done. You can inject your own additional JS if you need. See docs: cordova-plugin-inappbrowser 
          2. What you could do is do link replacement when you receive the story information. If you add the content to an element outside the DOM tree, you could easily query for all links (something like Array.from(df/*: documentFragment*/.querySelectorAll("a[href]")).forEach(el => /* do something */); )
          3. I would avoid round-tripping like that; instead intercept your form submission (form.addEventListener("submit", handler)) and execute an XHR (XMLHttpRequest) instead (or use the fetch API). Process the return result as needed. OR, use inAppBrowser.open() and listen for loading events. Your main web view should never navigate away from your local context.

            Are you using some sort of framework, like jQuery? Most will have features that make using XHR easier.

           

          Hope that helps some?

          • 2. Re: inappbrowswer and navigation
            howard_owens Level 1

            Thanks. That does give me some more things to chew on and research.

             

            I am using jquery.

             

            H.

            • 3. Re: inappbrowswer and navigation
              howard_owens Level 1

              This may explain a lot ... I thought I was submitting my form to the script below.  As you can see, it's supposed to take the URL from the form action to process.  (this is in reference to #3)

               

              I just figured out that my form submission was going straight to the server.  Having never done this before, I just ASSUMED it was going to the script and then my response was staying on the server.

               

              So now I just need to figure out how to trigger this script ... I'm thinking of wrapping it in a function, if I can figure out how, pass in the URL, and call it through my script that handles page rendering.

               

              $("#AjaxForm").submit(function(e)

              {

                  var postData = $(this).serializeArray();

                  var formURL = $(this).attr("action");

                  $.ajax(

                  {

                      url : formURL,

                      type: "POST",

                      data : postData,

                      success:function(data, textStatus, jqXHR)

                      {

              //success

                      },

                      error: function(jqXHR, textStatus, errorThrown)

                      {

                          //if fails     

                      }

                  });

                  e.preventDefault(); //STOP default action

                  e.unbind(); //unbind. to stop multiple form submit.

              });

               

              $("#AjaxForm").submit(); //Submit  the FORM

              • 4. Re: inappbrowswer and navigation
                howard_owens Level 1

                Sadly, this returns me to the same problem I was having last week but thought I resolved ... my false submission was a mirage ... problem persists.

                 

                My form isn't passing its variable values.

                • 5. Re: inappbrowswer and navigation
                  howard_owens Level 1

                  I've got my form submission problem fixed.

                   

                  As Kerri said in a previous thread ... the form needs to be submitted to an ajax function on the same page.  No action attribute in the form.