This is a migrated thread and some comments may be shown as answers.

InAppBrowser - Open a Url on app loading

9 Answers 675 Views
Sample Applications
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
devApps
Top achievements
Rank 1
devApps asked on 01 Mar 2017, 08:56 AM

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.

 

9 Answers, 1 is accepted

Sort by
0
devApps
Top achievements
Rank 1
answered on 01 Mar 2017, 10:10 AM

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>
0
devApps
Top achievements
Rank 1
answered on 01 Mar 2017, 11:21 AM

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.

 

0
Anton Dobrev
Telerik team
answered on 02 Mar 2017, 05:00 PM
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
0
devApps
Top achievements
Rank 1
answered on 07 Mar 2017, 09:05 AM

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 ?

0
devApps
Top achievements
Rank 1
answered on 09 Mar 2017, 08:05 AM

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 ?

0
Martin
Telerik team
answered on 10 Mar 2017, 08:55 AM

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
0
devApps
Top achievements
Rank 1
answered on 13 Mar 2017, 05:44 AM

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 ?

0
devApps
Top achievements
Rank 1
answered on 14 Mar 2017, 08:32 AM

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

0
Anton Dobrev
Telerik team
answered on 15 Mar 2017, 10:43 AM
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
Tags
Sample Applications
Asked by
devApps
Top achievements
Rank 1
Answers by
devApps
Top achievements
Rank 1
Anton Dobrev
Telerik team
Martin
Telerik team
Share this question
or