on desktop, the site I made works perfectly, however on mobile, the page constantly refreshes not allowing the user to view any of the content. I was having difficulty making my site responsive, so I made a new file called mobile.html to show all of the content properly. When the screen is a certain size, the site redirects to the mobile.html. Here is the code I believe is producing the issue.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=1500px, maximum-scale=1.0" />
<script type="text/javascript">
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ) {
document.location = "mobile.html";
}
</script>
How can I fix this issue?
Appreciate any help,
Thanks
First of all check mobile.html and make sure you don't have your forwarding code.
Alternatively you can check current page is not mobile.html.
You can use the code below this will put more control on your page.
First check if userAgent is mobile and then check if current page is not mobile.html if both true this means user is connecting from a mobile device but not viewing mobile page so forward to mobile page.
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var mobilePage = 'mobile.html';
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) && filename !== mobilePage ) {
document.location = mobilePage;
}
Try this code...
<script type="text/javascript">
if (document.location == "example.com/mobile.html") {
//do nothing
}
else if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
document.location = "mobile.html";
}
</script>
Related
The code below which I found here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var desktopFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
mobileFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
app = "vnd.youtube://4KnNVK-udTU";
if( /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
window.location = app;
window.setTimeout(function() {
window.location = mobileFallback;
}, 25);
} else {
window.location = desktopFallback;
}
function killPopup() {
window.removeEventListener('pagehide', killPopup);
}
window.addEventListener('pagehide', killPopup);
};
</script>
</body>
</html>
Is supposed to open youtube app based on the device. If it's a mobile device's browser through which the file was opened, the video must open up in the app. The code works fine in browser like FireFox. But it is not working on chrome. The app is not being opened, instead the browser version of youtube is being opened. That implies the mobilefallback link is being called, which is not I want.
And also if clicked from somewhere it works fine. The problem is only with Chrome. I don't know if it's some kind of chrome feature...but this is not what I need. Any help?
I can use any kind of solution. Even some other way to open up links like vnd.youtube://4KnNVK-udTU this directly in app.
Sorry if this info is not enough...I'll provide whatever it takes for you to help me out. ThankYou :)
This question already has an answer here:
Detect if page was redirected or loaded directly(Javascript)
(1 answer)
Closed 1 year ago.
I have a booking form on my website that when clicked, opens a form in a new window for the user to fill out to book a table, when the form is complete, the window is closed.
The problem is, I want the form to ONLY be accessed from this button on the homepage (Or just any button from the homepage). What I want to stop though, is users being able to access /booking directly without interacting with the homepage at all.
The behaviour I would like is
If a user clicks a button on the homepage, it should open the form with a window.open command (already implemented) and the user can fill out the form no problem.
IF the user simply types into the url www.DOMAIN.com/booking, it should recognise they are haven't accessed this page from the main page and just re-direct them back to www.DOMAIN.com.
Here is my current attempt at this.
Booking.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booking</title>
</head>
<body>
<div id="booking-form">
</div>
<script>
const myReferrer = document.referrer;
const hasReferrer = document.referrer != "";
const bookingFormArea = document.getElementById('booking-form')
if(hasReferrer) {
bookingFormArea.innerHTML=`<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>` // LOAD BOOKING FORM
} else {
bookingFormArea.innerHTML=`window.location.href = 'www.DOMAIN.com';` //Re-direct User to homepage
}
</script>
</body>
</html>
UPDATE: Upon further testing, it seems that by using a button to link to "/booking" through a 'onClick' method and also using 'window.open' for it, document.referrer still comes up blank, is this correct behaviour?
Looks like you are appending the window.location.href as part of the booking form's innerHTML. You should automatically redirect the user to the home page when document.referrer is empty.
<script>
const ref = document.referrer;
const bookingFormArea = document.getElementById('booking-form')
if (ref.match(/^https?:\/\/([^\/]+\.)?site\.com(\/|$)/i)) {
// came from the home page
// TODO: Replace domain URL site\.com
bookingFormArea.innerHTML=`<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>` // LOAD BOOKING FORM
} else {
window.location.href = "https://stackoverflow.com/";
}
</script>
Do not forget to change the domain name or URL with your own domain.
<button class="booking-button">Book Now</button>
Open booking page script.
<script>
document.querySelector(".booking-button").addEventListener("click", function(e) {
e.preventDefault();
window.location = "https://stackoverflow.com/booking";
});
</script>
I need one of my website pages to instantly redirect to another upon loading. The refresh HTML command does not work, as it does not check whether or not a certain url is being loaded. Also javascript will work too.
You can wait for a load event with JavaScript and use one of either:
window.onload = function() {
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
}
or
window.onload = function() {
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
}
Source: How to redirect to another webpage?
Just add a meta tag in the head section of your HTML like this:
<html>
<head>
<meta http-equiv="refresh" content="0;url=http://redirect-to-this-page.com" />
<title></title>
</head>
<body></body>
</html>
I using Benalman JS to control the back button window redirect url to home.
I tested in normal browser and Android phone, it work accordingly.
But it does not work in Ipad,
here is a part of the code.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.min.js"></script>
<script src="jquery.ba-hashchange.min.js"></script>
<script>
// control back button
// includes in js mean contains
if(!window.location.href.includes('#state')){
history.pushState(null ,document.title, '#state'); // forwards
}
// Bind an event handler.
jQuery(window).bind('hashchange', function(e) {
window.location = _contextPath + "/home/";
});
</script>
</html>
I notice that in Ipad the url will not append the "#state".
I suspect history.pushState not work in Ipad.
How can I fix this?
Thank you
The problem fixed after I change
includes
To
indexOf
Nothing to do with Benalman Js library. This js can excluded.
Thank you.
<!doctype html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<script>
function goToPage() {
var pageUrl = 'http://www.google.com/';
window.open(pageUrl);
}
</script>
<div id="installBtn" onclick="goToPage()">go to page</div>
</body>
</html>
The expected action is: when touch the div, a new window opens.
This code works great in the iPhone's safari.
But when I tap "+" -> "Add to Home Screen", and press "go to page", no window is opened, and the page loads in the same screen.
How to force, by javascript, a new window to open in the standalone mode?
The below question does mention a possible JavaScript solution out of the top voted answers, which constructs the anchor element and dispatches the 'click' event on it.
Question: Force link to open in mobile safari from a web app with javascript
Answer: https://stackoverflow.com/a/8833025/1441046
Alternatively if you can use an anchor element (I know you asked how to do it in JavaScript) you can do the following:
<a id="installBtn" href="http://www.google.com/" target="_blank">go to page</a>
Other related questions:
iPhone window.open(url, '_blank') does not open links in mobile Safari
This works for me. Doesn't work when requesting it from html, only from JS.
window.open('[url]','_system');
you can use childbrowser to open in the standalone mode
Or you can use this
window.location = url(your Url);
There you go! (if you still need it)
<script>
if(window.navigator.standalone === true)
document.write('Standalone');
else
document.write('Web browser');
</script>
R.