Using Cordova webview - javascript

I wish to find out, for mobile developing using Cordova, is there a way to open a remote web app, and when a button is click in the remote web app, it execute a java script in Cordova environment?
For example, my mobile app opened up a web page hosted in the app server through web view, to ask the user to acknowledge he read and accept the license. The user need to click "Accept" or "Not Accept" on the web page.
If the user click "Accept", I hope to run a javascript that can bring up another page in the mobile app for the user to proceed to use the mobile app.
Is this possible?
Thanks!

Firstly, it's not a good idea to have a mobile app that is totally reliant on a remote server in order to function properly: what if the user's internet connection cuts out or is intermittent? (that happens plenty where I live).
However, one solution would be use an iframe to load the remote webapp content and cross-frame messaging to communicate the outcome of the UI interactions with the remote webapp back to your Cordova app. You will have to appropriately whitelist your remote webapp URL.
Something like this:
Cordova app index.html
<html>
<head>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function onDeviceReady(){
window.addEventListener("message", onFrameMessage, false);
}
function onFrameMessage(event){
var eventName = event.data[0];
if(eventName === "terms_result"){
var accepted = event.data[1] == 1; // == will match 1 or "1"
if(accepted){
// Do something - e.g. change to homepage
}else{
// Do something else - e.g. display an error message
}
}
}
document.addEventListener("deviceready", onDeviceReady);
</script>
</head>
<body>
<div data-role="page" id="terms">
<iframe src="http://example.com/my/remote/webapp" style="border: 0; width: 100%; height: 100%"></iframe>
</div>
<div data-role="page" id="home">
<!-- Your home page content -->
</div>
</body>
</html>
Remote webapp html
<html>
<head>
<script type="text/javascript">
function accept(result){
window.parent.postMessage(["terms_result", result], "*");
}
</script>
</head>
<body>
<button onclick="accept(1)">Accept</button>
<button onclick="accept(0)">Not Accept</button>
</body>
</html>

Related

Apache Guacamole JS not rendering in web application

I'm using the apache guacamole-common-js library to allow rdp access to VMs within my web application via Apache Guacamole. I have an instance of guacamole and the client up and running on a server and I'm attempting to connect to tunnel to my instance via web sockets. I can see from the developer tools and server side logs that the web socket connection is working and that commands are being passed b/t my web application and the server, however the UI is never displayed.
I'm following all the examples I've been able to find, to no avail. I am testing this locally with a connection to the server, so it is a cross domain scenario, however as I mentioned the traffic b/t client and server appears to be working as expected. It's simply not rendering anything visually. When I look at the DOM, I can see elements injected that represent the guacamole client display elements. My code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="guacamole.css">
<title>Guacamole (EXAMPLE)</title>
</head>
<body>
<!-- Display -->
<div id="display" style="background-color: #f0f0f0; height: 500px; width: 500px;"></div>
<!-- Guacamole JavaScript API -->
<script type="text/javascript" src="https://myserver.com/guacamole-common-js/all.min.js"></script>
<!-- Init -->
<script type="text/javascript"> /* <![CDATA[ */
// Get display div from document
var display = document.getElementById("display");
var wsFullUrl = "wss://myserver.com/websocket-tunnel?token=CB3A548656A5A0F5470AD0A51BE79883B864A4FF8B0308F87F53F8FBC49BA74F&GUAC_DATA_SOURCE=mysql&GUAC_ID=3&GUAC_TYPE=c&GUAC_WIDTH=500&GUAC_HEIGHT=500&GUAC_DPI=192&GUAC_TIMEZONE=America/Chicago&GUAC_AUDIO=audio/L8&GUAC_AUDIO=audio/L16&GUAC_IMAGE=image/jpeg&GUAC_IMAGE=image/png&GUAC_IMAGE=image/webp";
// Instantiate client, using an HTTP tunnel for communications.
var guac = new Guacamole.Client(
new Guacamole.WebSocketTunnel(wsFullUrl)
);
var element = guac.getDisplay().getElement();
// Add client to display div
display.appendChild(element);
// Error handler
guac.onerror = function (error) {
alert(error);
};
// Connect
guac.connect();
// Disconnect on close
window.onunload = function () {
guac.disconnect();
}
// Mouse
var mouse = new Guacamole.Mouse(guac.getDisplay().getElement());
mouse.onEach(['mousedown', 'mouseup', 'mousemove'], function sendMouseEvent(e) {
guac.sendMouseState(e.state);
});
// Keyboard
var keyboard = new Guacamole.Keyboard(document);
keyboard.onkeydown = function (keysym) {
guac.sendKeyEvent(1, keysym);
};
keyboard.onkeyup = function (keysym) {
guac.sendKeyEvent(0, keysym);
};
/* ]]> */</script>
</body>
</html>
Any insight anyone might have would be much appreciated!

UWP Webview ScriptNotify is not getting trigerred

Need to get callback from webpage to my "WebView" in C# using scriptnotify. But it's not working.
I hosted a webpage locally using node js. Webpage is as below.
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "latest";
window.external.notify('The script says the doubled value is ' );
}
</script>
</body>
</html>
After that created a UWP app to open the webpage using webview. Added window.external.notify in the JS to get the call back. But not getting the same.
//C# code to get the callback
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
//Added the notification handler here
webView.ScriptNotify += webView_ScriptNotify;
//Navigating to the local page
webView.Navigate(new Uri("http://localhost:8080/"));
}
async void webView_ScriptNotify(object sender, NotifyEventArgs e)
{
//Kept break point here , but it's not getting hit any time.
var jsScriptValue = e.Value;
Debug.WriteLine("Send to debug output.");
}
}
//Added a web view control in xaml file
<Grid>
<WebView x:Name="webView" Height="500"> </WebView>
</Grid>
UWP Webview ScriptNotify is not getting trigerred
Please check WebView document.
To enable an external web page to fire the ScriptNotify event when calling window.external.notify, you must include the page's URI in the ApplicationContentUriRules section of the app manifest. (You can do this in Microsoft Visual Studio on the Content URIs tab of the Package.appxmanifest designer.) The URIs in this list must use HTTPS, and may contain subdomain wildcards (for example, https://.microsoft.com) but they cannot contain domain wildcards (for example, https://.com and https://.). The manifest requirement does not apply to content that originates from the app package, uses an ms-local-stream:// URI, or is loaded using NavigateToString.
So, you need add your uri to the content uri option.

Display different HTML for Android and iOS

I have a requirement to display different HTML based on whether the client accessing the portal is using an Android or iOS phone. I have tried to use the userAgent based detection: Redirect users to iTunes app store or google play store?
I then tried to use: $( document ).ready(function() { and an if statement to check if agent is iOS or Android and based on either, display div for iOS or div for Android. Any good way of doing that?
ANDROID SPECIFIC INSTRUCTIONS
<div id="android-quicklink">
<p>ANDROID SPECIFIC INSTRUCTIONS</p>
<p id="content-container"><span class=“googleplay-icon"> </span></p>
</div>
<script>
$( document ).ready(function() {
if (getMobileOperatingSystem() == "Android") {
$('#android-link').attr("href", "https://play.google.com/xxxxxxx");
$(‘.googleplay-icon').toggleClass('googleplay-icon')
$('#android-quicklink').toggle();
}
});
</script>
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
"mobile.html" would be replaced with the location of wherever your mobile version resides. This technique could be adapted to load an alternate stylesheet as well.
#For iPhones/iPods Specifically
<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("http://url-to-send-them/iphone.html");
}
-->
</script>

How to greayout back button and view source of browser

How do u greayout backbutton or view source of browser so users can't click backbutton and view source code because javascript contains lot of business logic code. I need to greayout those options so users can't be able to click them. i recently joined banking project and i am beginner in java and development.
Try adding this in the Head section of your html file:
<script type="text/javascript">
window.history.forward();
function noGoingBack() {
window.history.forward();
}
</script>
And add this in your Body section:
<body onload="noGoingBack();" onpageshow="if (event.persisted) noBack();" onunload="">
This prevents the page from going back.

SERIALITY() plugin installation on firefox or chrome

Please help me to understand how to install the Seriality Plugin (www.zambetti.com/projects/seriality/‎) in Chrome or Firefox.
I want to read from a COM Port on the client side of a web page.
Take a look at the Google code site, this site contains the DMG file you can use to install the Seriality.plugin file.
https://code.google.com/p/seriality/
You can also see the sample source on the site that shows the javascript to use the plugin, below is a snippet shown on the site that prints "Hello World" to the first port seen on the system at a baudrate of 9600 when this HTML file is loaded.
<html>
<head>
<script type="text/javascript">
function setup()
{
var serial = (document.getElementById("seriality")).Seriality();
serial.begin(serial.ports[0], 9600);
serial.write("Hello World");
}
</script>
</head>
<body onload="setup();">
<object type="application/Seriality" id="seriality" width="0" height="0"></object>
</body>
</html>

Categories

Resources