How to set Header and Footer to InApp Browser using Cordova

1,211 views

Skip to first unread message

madpop

unread,

Dec 21, 2015, 9:07:03 AM12/21/15

to phonegap

Hi i am having a problem with "In app browser" . In the INapp browser i want to displaying a webpage along with that i also want to display the header and footer along with web page so that and on that head i want to place a button named exit when ever i press exit it has to be closed . I surfed so many sites didn;t any proper solution

this is my code

<!DOCTYPE html>

<html>

<head>

<title>InAppBrowser.removeEventListener Example</title>

// Wait for Cordova to load

document.addEventListener("deviceready", onDeviceReady, false);

// Global InAppBrowser reference

var iabRef = null;

function iabLoadStart(event) {

alert(event.type + ' - ' + event.url);

}

function iabLoadStop(event) {

alert(event.type + ' - ' + event.url);

}

function iabClose(event) {

alert(event.type);

iabRef.removeEventListener('loadstart', iabLoadStart);

iabRef.removeEventListener('loadstop', iabLoadStop);

iabRef.removeEventListener('exit', iabClose);

}

// Cordova is ready

function onDeviceReady() {

alert('Device is ready!');

//iabRef = window.open('http://apache.org', '_blank', 'location=yes');

//iabRef.addEventListener('loadstart', iabLoadStart);

//iabRef.addEventListener('loadstop', iabLoadStop);

//iabRef.addEventListener('exit', iabClose);

}

</script>

</head>

<body>

<p>

link test<br /><br />

<a href="#" onclick="window.open('http://192.145.0.15/newActi/', '_self', 'location=yes,zoom=yes')">Wikipedia (webview)</a><br /><br />

<a href="#" onclick="window.open('http://192.145.0.15/newActi/', '_blank', 'location=no,zoom=yes')">Wikipedia (inAppBrowser)</a><br /><br />

<a href="#" onclick="window.open('http://192.145.0.15/newActi//', '_system', 'location=no,zoom=yes')">Wikipedia (mobile browser)</a><br /><br />

</p>

<p>

button test<br /><br />

<button type="button" onclick="window.open('http://192.145.0.15/newActi/', '_self', 'location=no,zoom=yes')">Wikipedia (webview)</button><br /><br />

<button type="button" onclick="window.open('http://192.145.0.15/newActi/, '_blank', 'location=no,zoom=yes')">Wikipedia (inAppBrowser)</button><br /><br />

<button type="button" onclick="window.open('http://192.145.0.15/newActi/', '_system', 'location=no,zoom=yes')">Wikipedia (mobile browser)</button><br /><br />

</p>

</body>

</html>

jcesarmobile

unread,

Dec 21, 2015, 9:25:50 AM12/21/15

to phonegap

You can use executeScript and insertCSS functions to inject any js and css you want, using both together should be possible to create a header and footer with buttons

Reply all

Reply to author

Forward

0 new messages