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>
Related
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>
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>
If a specific <div id='credits'> is removed from the HTML document, I want it the user to be redirected to a new web page using JavaScript.
For example:
<div id="credits"></div>
If someone removes it then users will be automatically redirected to my website.
This is to protect copyrights.
If I understand you are worried about someone copying your page to their website, you can try this, though it is indeed absurdly easy to get around:
<script type="text/javascript">
if($('#credits').length == 0)
window.location = 'http://www.url.com'
</script>
in your page load event you may check like following:
$(document).ready(function(){
var yourDiv=document.getElementById("credits");
if(yourDiv===null || yourDiv===undefined)
window.location="http://www.google.com";
});
or
window.onload=function(){
var yourDiv=document.getElementById("credits");
if(yourDiv===null || yourDiv===undefined)
window.location="http://www.google.com";
}
Try this:
<script type="text/javascript">
$(document).ready(function(){
if($("#your-div-id").length == 0) {
window.location.href = "your-url";
}
});
</script>
I have some code that someone wants to put on their site. Here is the code i received from them:
<script language="JavaScript" src="http://dm4.contactatonce.com/scripts/PopIn.js" type="text/javascript"></script>
<script language="JavaScript" src="http://dm4.contactatonce.com/PopInGenerator.aspx?MerchantId=44542&ProviderId=3176&PlacementId=0" type="text/javascript"> </script>
<script language="JavaScript">
popIn();
</script>
The way this particular site is set up I cannot pick and choose which page to display it on - it has to go in the <head> of every page. The problem is that i want it to NOT show up on only one particular page. THe page name is /CreditApplication.aspx. I know i need to add an if statement to check the URL but i'm not quite sure how to accomplish that with this particular code as it uses external javascript files.
Any help would be great appreciated!
Thanks!
EDIT: Thanks for all the answers! Let me clarify one thing: the reason i need this is because the page the code is going on is a secured (https) page. These js scripts are not using secured links so in some browsers it gives you an error saying "some content on this page may not be secure" or whatever. I am trying to make sure these don't run on only this page. That's why i need the conditional statement on them. Hope that helps.
How about
if (! /CreditApplication\.aspx$/.test(window.location.href) {
popIn();
}
Edit the regex as needed if the page can accept parameters.
Try this:
<script>
window.location.pathname !== '/CreditApplication.aspx' &&
document.write(unescape('%3Cscript src="http%3A//dm4.contactatonce.com/PopInGenerator.aspx%3FMerchantId%3D44542%26ProviderId%3D3176%26PlacementId%3D0%22%20type%3D%22text/javascript')) &&
document.write(unescape('%3Cscript src="http%3A//dm4.contactatonce.com/scripts/PopIn.js"%3E%3C/script%3E'));
</script>
I'm not completely sure I'm following your question, but if I am here is how to get started:
if(window.location.href.indexOf("/CreditApplication.aspx") === -1) {
popIn();
}