InAppBrowser - Open a Url on app loading

10 posts, 0 answers
  1. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 01 Mar Link to this post

    Hi I am trying to create an app that is just a web wrapper.

    So when user clicks on the app icon , it just opens the website in the in-app browser

    I have seen the InAppBrowser sample , where we have button to open Telerik website in in-app browser.

    Is there a way where can customize the nav-bar of the in-app browser , let's say just remove the url and the close "x" icon.

     

  2. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 01 Mar in reply to devApps Link to this post

    I am using the following code to achieve this , but the url is not opening in in-app browser , 

    It is opening externally in chrome

    <body>
        <!--//Sample Body -->
        <div data-role="view" data-init="openUrl" data-show="openUrl1">
            <!--//Sample View-->
        </div>
             
        <script>
            var app = new kendo.mobile.Application(document.body,
            {
                platform:'ios7'
                //skin : "metro"   
            });
             
            function openUrl() {
                //alert("Dummy");
                //window.open("http://www.telerik.com/", "_blank");
            };
     
            function openUrl1() {
                //alert("Dummy1");
                window.open("http://www.telerik.com/", "_blank");
            };
        </script>
    </body>
  3. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 01 Mar in reply to devApps Link to this post

    I have modified the sample app and was able to achieve opening the url directly when app loads.

    But I still like to know what was wrong with my code above ?

    Also how can I customize the navigation bar or address bar when the url is opened in the in-app browser ?

    I want to remove the url and also the closing icon.

    I just want back and forward navigation to be visible.

     

  4. Anton Dobrev
    Admin
    Anton Dobrev avatar
    605 posts

    Posted 02 Mar Link to this post

    My assumption is that the issue was rooted in the _blank parameter and using the window.open function. 

    For best results please refer to using the method cordova.InAppBrowser.open() - (the sample should be update accordingly and will be)

    To accomplish your scenario - the InAppBrowser supports a lot of options and configurations - please refer to the plugin's API (which you can examine here). For example, you can insert CSS in it. However, I am not sure if all requirements can be accomplished with the plugin API. Refer to the documentation for more information.

    Please note that if your app is going to be submitted to the Apple App Store it may not be approved if it only opens a web page inside an app. Apple require that applications give a different look and feel by accessing native device capabilities and options available on mobile devices. You can examine on this matter the following list of common rejections (see Web clippings, content aggregators, or a collections of links) or the official guidelines.

    I hope this helps.

    Regards,
    Anton Dobrev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 07 Mar in reply to Anton Dobrev Link to this post

    Thanks for the help.

    We are planning to submit this app only to our employees.

    We are enrolling for the Apple Enterprise Program to do this.

    Can we directly use the downloaded file from Telerik Platform and push it to employees from the Enterprise Account ?

    Additionally is there any way to save the passwords on the websites visited using InAppbrowser ?

  6. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 09 Mar in reply to devApps Link to this post

    With Telerik App Manager the app distribution is very simple and it solved my inhouse distribution issue.

    I only have two more things to finish which are related to the InAppBrowser:

    1. In ios , I need to remove the "Done" button.                                                                                                                                       I have set location=no and set the closebuttoncaption to empty string.With this there is no button visible , but the close functionality is still there.                                                                                                                                                               How can I totally disable the close button ?
    2.  I need to store the passwords for the websites the users have visited , such that they do not have to enter it again and again.

    Could you please help me with these final changes ?

  7. Martin
    Admin
    Martin avatar
    103 posts

    Posted 10 Mar Link to this post

    Hi,

    My name is Martin, filling in for my colleague Anton. I am glad to hear App Manager has helped. As to your questions:

    1. Remove the "Done" button in iOS:

    • you may change the "Done" text by setting a different string to the closebuttoncaption option
      var ref = cordova.InAppBrowser('http://apache.org', '_blank', 'closebuttoncaption=My Button Name');
    • you remove the entire bottom toolbar by setting the toolbar option to "no"
      var ref = cordova.InAppBrowser('http://apache.org', '_blank', 'toolbar=no');

    2. Saving the passwords should be possible. You would need to connect proper handler to loadstop event. Then use local storage to store/get the usernames and passwords. The code may look like this:

    function loadStopped() {
        // Here use JavaScript to manipulate the actual page on hand.
        var username = "";
        if (localStorage.getItem("username") !== null) {
            username = localStorage.getItem("username");
        }
        var password = "";
        if (localStorage.getItem("password") !== null) {
            password = localStorage.getItem("password");
        }
        document.getElementById("username_field").value = username;
        document.getElementById("password_field").value = password;
        // document.getElementById("the_form").submit();
        document.getElementById("the_form").addEventListener("submit", function() {
            localStorage.setItem("username", document.getElementById("username_field").value);
            localStorage.setItem("password", document.getElementById("password_field").value);
        });
    }
    ref = window.open('http://google.com', '_self', 'location=yes');
    ref.addEventListener('loadstop', loadStopped);

    I hope this helps.

    Regards,
    Martin
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 13 Mar in reply to Martin Link to this post

    Thanks for the reply.

    I have already tried this code from the following stack-overflow post :

    http://stackoverflow.com/questions/27766375/autologin-with-inappbrowser-on-an-external-website

    I have a strange problem with this code.

    When I try to set a value using document.getElementById in the loadStop function , it does not set it.

    When I do the same from Chrome Developer Console it works.

    Any pointers to resolve this ?

  9. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 14 Mar in reply to devApps Link to this post

    InAppbrowser cannot directly reference the dom elements.

    We have to use ref.executeScript method to achieve it.

    I have found the following links useful and I was able to store the username and password successfully.

    http://stackoverflow.com/questions/33880492/cordova-inappbrowser-referencing-elements

    http://stackoverflow.com/questions/38086643/selecting-dom-elements-with-inappbrowser-cordova

    http://www.telerik.com/blogs/cross-window-communication-with-cordova's-inappbrowser

    Now I have to chain these passwords. Let's say I load telerik.com using cordova.InAppBrowser.open and this page has links to some other page google.com for ex.

    I want the username and password to be applied on this linked page as well.

    This doesn't seem to work as of now.

    Could you please provide some quick pointers as to how we use the same credentials on all websites opened from the home page

  10. Anton Dobrev
    Admin
    Anton Dobrev avatar
    605 posts

    Posted 15 Mar Link to this post

    The solution (yet I am not sure if this can be accomplished) for this scenario you would like to achieve depends on the way authentication used on the other pages and the way they are used.

    It sounds like you may need to use a combination of the following:

    - execute a script with the plugin methods
    - pass and access data from the different pages (perhaps with making the server to store a cookie or to redirect to another page with parameters and the other page bring it from there or get the cookies)
    - pass data from between pages or something similar to the approach shown in this blog post

    My assumption that the approach may include also some server modifications of your different pages. The best choice, however, is at the discretion of the developer of the app and the web pages.

    In addition, make note for any possible security implications as with any browser requests or redirects, the same security problems as with other browsers apply to the InAppBrowser, especially if you need to make some modifications to the current web pages.

    I hope this helps.

    Regards,
    Anton Dobrev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top