Develop Reference

How to detect cordova iOS WebView navigation events

As per cordova iOS WebView Guide you can embed web views in iOS.
According to that you can do
<content src="http://apache.org" />
with the definition of
CDVViewController* viewController = [CDVViewController new];
I am wondering if there is a way to detect if that content source navigated to another site by clicking the link and if there is way how to get the new URL ?
CDVViewController is the one referenced but I can't tell by inspecting as to how one would accomplish that.
A slight parallel to that is Microsoft's x-ms-webview which at DOM level allows me to do this:-
var webView = document.getElementByTag("x-ms-webview");
webView.addEventListener("MSWebViewNavigationCompleted", function (arg) {
if (arg.uri.match(/something)) {
doSomething();
}
});
Another example in iOS but just for loading initial page.
How do detect navigations inside WebView in Cordova iOS ?

Cordova post CDVPageDidLoadNotification when the page is loaded.
You can listen for it with
[[NSNotificationCenter defaultCenter] addObserver:self selector:#selector(pageDidLoad:) name:CDVPageDidLoadNotification object:self.webView];

Resizing the Cordova WebView in iOS

I'm having problems resizing the Cordova (4.0.1) webview frame while trying to build a Native Hybrid application. I am relatively new to iOS development and really new to Cordova/PhoneGap.
I have followed all instructions on this page, http://docs.phonegap.com/develop/1-embed-webview/ios/, using the CocoaPods approach with the sample phone gap project. I have searched and tried other methods that are syntactically different, but essentially the same.
I've created a custom view controller class "GolfViewController" that extends the CDVViewController class provided by Cordova. This code for GolfViewController.swift is below:
import UIKit
class GolfViewController: CDVViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func viewWillAppear(animated: Bool) {
self.view.backgroundColor = UIColor.blueColor()
self.webView.frame = CGRectMake(self.view.bounds.origin.x,
self.view.bounds.origin.y + 50,
self.view.bounds.size.width,
self.view.bounds.size.height - 100)
super.viewWillAppear(animated);
}
}
The content in the webview should load with some space at the top and bottom of the screen. Which it actually does, for a split second, then something in the cordova javascript forces the webview to full screen. If I comment out the wkwebview cordova plugin in cordova-plugins.js, the webview renders properly with the space at the top and bottom, but then of course none of the controls work.
Any help would be greatly appreciated as all documented approaches I've tried, have failed.
************* SOLVED *************
There is a cordova plugin called "cordova-plugin-statusbar", that when initialized resizes the webview frame to take full screen. This only happens when you have
<preference name="StatusBarOverlaysWebView" value="true" />
defined in the config.xml for the webview.
It does not simply "overlay the status bar" as you might expect from the documentation. Setting this parameter to true actually completely resizes the webview to go full screen and will override any other custom sizes you may have defined before this event fires.
If you either remove the plugin (not really needed for native hybrid apps anyway) or you disable the "StatusBarOverlaysWebView" preference, then the status bar plugin will not resize your webview and the size you define in "viewWillAppear" will be respected and not overridden. This should be updated within the official phone gap documentation on embedding the web view.

crosswalk-project android full screen

In my html5 game, I have a login field and therefore when the user enter the text fields(username and password), the android keyboard pop up along with the onscreen soft keys(where back button and menu button is present).
While building my app with crosswalk, I set the display to fullscreen in the manifest and it is working fine except for this login screen bringing back the soft buttons. I have no knowledge of native android coding and is wondering if the buttons can be hidden again through API calls from the javascript.
The scaling of the html is done through meta viewport in the html and the game behaves like that of a browser.
var scale = screen.availWidth/1024;
var vp = document.querySelector("meta[name='viewport']");
vp.setAttribute("content","width=device-width, user-scalable=no, initial-scale="+scale);
I did tried my canvas to request full screen and it works but the size of the canvas is not taking the whole screen and it looks bad again.
Any suggestions on how I should proceed or which article I should be reading or direct solution?
Also, if you need any more information or code, let me know. Thanks!

I've had similar problem.
You can make it fullscreen again by requesting it from your JavaScript code. You can use screenfull.js library:
if (screenfull.enabled) {
screenfull.request();
}
This was to complicated for my project, so I ended up not using fullscreen mode, but I've added new attribute in my Crosswalk/template/AndroidManifest.xml file:
android:windowSoftInputMode="adjustPan"
This way, my app will not shrink when soft keyboard pops-up.

I solved a similar issue using cordova-plugin-fullscreen and the following code:
if (typeof(AndroidFullScreen) != 'undefined') {
console.info("AndroidFullScreen is defined");
AndroidFullScreen.immersiveMode(
function(){
console.info("AndroidFullScreen.immersiveMode success");
}, function(){
console.info("AndroidFullScreen.immersiveMode error");
});
}

iOS: How to stop screen layout distortion because of Keyboard?

I want to stop the Keyboard from distorting/resizing my layout in my phonegap application. I have used the following native android code to disable and enable resize in the application using a Cordova Plugin:
this.cordova.getActivity().runOnUiThread(new Runnable() {
public void run() {
context.getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
}
});
However I have no idea how to do the same in iOS(6 & 7). Can anyone provide a snippet that I can use? Or point me in the right direction?

This functionality is available in the Cordova Keyboard plugin. You can then either add a preference to the main Cordova config.xml...
<preference name="KeyboardShrinksView" value="false" />
...or call the corresponding method on the created global Keyboard object:
window.Keyboard.shrinkView(false);

Change orientation on Phonegap JQuery mobile

Hi i write simple app using jqm and phonegap, and i have some problem with change orientation. I need to change orientation on one page. I can change values "Supported interface orientations" but it work on all pages, may be exist way to change orientation on one page ?

You can use this plugin.
https://github.com/champierre/pg-plugin-screen-orientation
To lock the screen to Landscape:
navigator.screenOrientation.set('landscape');
To lock the screen to Portrait:
navigator.screenOrientation.set('portrait');
To unlock:
navigator.screenOrientation.set('fullSensor');

Here is an updated plugin which works perfectly for me: https://github.com/apache/cordova-plugin-screen-orientation
To use it (for cordova version > 4) execute this command:
cordova plugin add cordova-plugin-screen-orientation
Or for phonegap:
phonegap plugin add cordova-plugin-screen-orientation
Then use it like this:
screen.lockOrientation('portrait')
screen.lockOrientation('landscape')
Works for Android & iOS.