Phonegap InApp browser

Posted By : Avilash Choudhary | 29-Sep-2014

In phonegap, if your App contains external links then you can use InApp browser to open the external links. InApp browser is a browser which opens the link with in the app. You can use InApp browser options to change according to your application. Such as change the text of the back button. You can adjust the back button to bottom or at top.

 browser.openLink = function(link) {
	var ref = window.open(link, '_blank', 'location=no,closebuttoncaption=Back,toolbarposition=top,disallowoverscroll=no,clearcache=yes,transitionstyle=fliphorizontal,hidden=no');
	ref.addEventListener('loadstart', function(event) {
		//alert('start: ' + event.url);
	});
	ref.addEventListener('loadstop', function(event) {
		console.log('stop: ' + event.url);
		//   ref.show();
	});

	ref.addEventListener('loaderror', function(event) {
		console.log('error: ' + event.url);
	});

};

For iOS, you need to go in xcode plugins section and change in CDVInAppBrowser.m file.

Modify the background color

 self.view.backgroundColor = [UIColor colorWithRed:133.0 / 255.0 green:197.0 / 255.0 blue:31.0 / 255.0 alpha:1];

 

To change the back button and tool bar color

self.closeButton.tintColor = [UIColor whiteColor];
self.toolbar.barTintColor=[UIColor colorWithRed:123.0 / 255.0 green:194.0 / 255.0 blue:11.0 / 255.0 alpha:1];

You can also change the status bar color by modifying this

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleBlackOpaque];

Thanks

About Author

Author Image
Avilash Choudhary

Avilash has excellent experience in developing mobile and web applications using jQuery , Javascript and PhoneGap. His hobbies are watching and playing cricket.

Request for Proposal

Name is required

Comment is required

Sending message..