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>
Related
I'm trying to run an HTML5 QR code scanner on an android phone offline. I'm using this library
https://github.com/schmich/instascan
I just copied the below code right from the documentation and it's working like a charm on my computer. When I copy the folder to my android 8 phone, I don't get anything when I open the file with chrome. I should be getting a prompt window to allow camera access but I don't. I tried running an alert() on the page to see if JS is running and it is. I was wondering if there were any other steps to be taken if order for this to work from a local folder on an android smartphone local storage. PS: I also checked to see the permissions manually,they were all set to ask first
<!DOCTYPE html>
<html>
<head>
<title>Instascan</title>
<script type="text/javascript" src="instascan.min.js"></script>
</head>
<body>
<video id="preview"></video>
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
</body>
</html>
Do you add the instascan.min.js to the phone as well? If yes did you add it to the same directory?
Instascan requires a secure connection (HTTPS), so you just need to add https to the url at the beginning to request access to the camera, even if the site does not have the corresponding certificates.
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>
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.
We are developing phone-gap application.We have 4 pages like one.html,two.html,three.html,four.html.In this one(two.html) of the HTML file need to be landscape mode automatically.
Please guide to us.We are new to this.
Add this script first
<script type="text/javascript" src="cordova.js"></script>
Then inside another script tag
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var so = cordova.plugins.screenorientation;
so.setOrientation(so.Orientation.LANDSCAPE);
}
</script>
You can use the Screen Orientation PhoneGap Plugin for Android
Following is the link.
https://github.com/their/pg-plugin-screen-orientation
I have developed a mobile version of an existing web site. I have added some JavaScript to the home page of the desktop version of the site to handle the redirect. The code works on a mobile device except that a copy of the home page appears before the redirect. Can anyone help with this or does anyone know how to make the JavaScript run before the page loads? An example of the JavaScript code is below.
Also, the site's desktop home page is in HTML and PHP is not an option. We also don't want to do a permanent mobile redirect. We want users to be able to access the desktop version if they want.
Code:
<!doctype html>
<head>
<!--start JavaScript code-->
<script>
if (screen.width < 500 ||
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/) ||
navigator.appName("Chrome")) {
window.location.replace("TexasLandBankMobile/default.html");
</script>
<!--end JavaScript code-->
<title>Test</title>
</head>
<body>
<div id="container">
This is not a mobile device <br/>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Why not use reactive design and don't send mobile users anywhere but your homepage?
And unless you do the redirect on the server level (apache rewrite etc) you can't do what you ask.
Your best bet would be to redirect the user before they even get to your page, that way the user doesn't have to wait for a bloated desktop version of the site to download.
But for a workaround, you could try hiding both versions of the page and then set the desktop/mobile version of the site to visible.
e.g.
<script>
function isMobileDevice() {
return screen.width < 500 ||
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/) ||
navigator.appName("Chrome"));
}
if (isMobileDevice()) {
window.location.replace("TexasLandBankMobile/default.html");
} else {
// set container div to visible
document.getElementById('container').style.visibility = 'visible';
}
</script>