I am using the same ip address for many websites, so they all share the same index. So, I made all requests redirect to the main domain, as long as its not the main domain. This works just fine. My problem, is that now I made a mobile version of my website. Now, every time someone goes to the mobile website, it redirects them forever, from the main page, to the mobile one.
Here's what I have so far:
var loc = window.location.href + '';
if (loc.indexOf('https://maindomain.com') - false); {
window.location.replace("https://maindomain.com")
}
language = "JavaScript" >
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
window.location.replace("https://mobilewebsite.com")
}
Related
I am looking for a way in JAVASCRIPT (possibly using iframes), to keep the url of an original site when a new page appears. Example: original site url shows www.initialPage.com. When the user clicks ALT-Z, the new website should show the content of www.secondaryPage.com. The code I thought would work looks like below. However, when ALT-Z is selected, www.initialPage.com stays in the url (which is what I want) but only a blank page shows.
document.addEventListener('keydown', function(e) {
if (e.altKey) {
switch (e.code) {
case 'KeyZ':
function prepareFrame() {
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "http://www.secondaryPage.com");
ifrm.style.height = "100vh"
ifrm.style.width = "100vw"
document.body.replaceWith(ifrm);
}
prepareFrame();
break;
}
}
});
Is there something I forgot in the function to allow www.secondaryPage.com to display? I know there are security risks but this is for a very small trusted private network
I've done a lot more experimentation on this and it seems the reason the site with the iframe (www.secondaryPage.com) does not display has something to do with the initial page (www.initialPage.com) is a secure site. When I use an un-secure site as the initial page, the secondaryPage is displayed just fine. If anyone can provide some insight as to what I can do to have the above code work while on a secure site, I would appreciate it.
I'm working a wordpress website that needs a mobile redirect to the mobile home page in case the user is using a cell. I'm trying to utilize this Javascript code but I'm having major difficulties getting it to work properly.
I need help removing the conformation section that asks the user if they want to continue to mobile site.
I also need help figuring out how to restructure the code so it doesn't keep forwarding mobile user to home page. For example, I load the page on mobile, the code runs and it forwards me to mobile page. From there I click on another link in the top navigation and it takes me back to the home page no matter what I do.
Keep in mind I am very new to this so any Input and Help from you experienced folks out there would be much appreciated.
Thank You
P.
<script type="text/javascript">
if (screen.width < 1081) {
var ref = document.referrer;
var urls = new Array("http://www.mymainsite.com","http://m.mymobilesite.com");
var n = ref.match(urls[0]);
var m = ref.match(urls[1]);
if ((m!==null) || (n!==null)) {
stop;
}
else if (ref=='') {
var r = confirm("Small Display is Detected.\nClick \"OK\" for MOBILE SITE.");
if (r==true) {
window.location = "http://m.mymobilesite.com";
}
else {
stop ;
}
}
else
{
window.location = "http://m.mymobilesite.com";
}
}
</script>
We only activate this code on your main site. Then we check whether or not your screen width is small enough and look into localStorage to see whether or not the user has made a decision before. Then we put up the confirmation box. If the user clicks okay, we go to the mobile site, if not we set the localStorage variable to true. Keep in mind that localStorage is only available IE8+
if(location.hostname === 'mymainsite'){
if (screen.width < 1081 && !localStorage.isMainSite) {
if(confirm('Small Display is Detected.\nClick \"OK\" for MOBILE SITE.')){
window.location = "http://m.mymobilesite.com";
} else {
localStorage.isMainSite = true;
}
}
}
I'm trying to redirect user's of my mobile webapp to use Chrome rather than Safari. I tried using the following:
<script>
javascript:location.href="googlechrome"+location.href.substring(4);
</script>
However this constantly opens tabs in Chrome in a loop. Do you know how I can successfully do this?
Cheers,
Dara
This will cause the page to open every time the webpage is loaded, regardless if you are in Safari or Chrome. This is also very poor User Experience to just forward the user to another browser without their input.
It would be better to have some way for the user to open your site in Chrome and also to have an explanation why it is needed.
There are other schemes for https and callbacks: https://developer.chrome.com/multidevice/ios/links#uri_schemes
<p>This webapp is best viewed in Google Chrome</p>
<button type="button" onclick="openInChrome()">Open in Chrome</button>
<script>
var openInChrome = function() {
if (/^((?!Chrome).)*(Safari)+.*$/.test(navigator.userAgent)) {
var protocol = location.href.substring(0,location.href.indexOf(':'));
var url = location.href.substring(location.href.indexOf(':'));
if (protocol === "http") {
location.href = "googlechrome" + url;
}
else {
location.href = "googlechromes" + url;
}
}
}
</script>
Edit:
Added a check to verify they are in Safari.
Well, the reason is pretty obvious; Chrome is instructed to open Chrome too. You just want a userAgent conditional.
if (navigator.userAgent.indexOf("CriOS") == -1) {
location.href="googlechrome"+location.href.substring(4);
}
I would go on my standard rant about user agent checking being bad, but I trust what you're saying about this being a private webapp. Since iOS doesn't let you change your default browser, I guess this is a fair workaround.
Alright, so in my SharePoint (2013) site, I made a simple JavaScript Web Part to refresh the page every five minutes. I went to adjust the time, backspaced out where I'd entered the time to wait before a refresh, and without thinking exited the edit page. This left me in an infinite loop of refresh, and since I do not have admin access to the laptop I am working on, I cannot manually disable JavaScript. My hope now is to find a way to edit, or just delete, the Web Part causing this from elsewhere. Can this be done?
Here's the code I used:
<script type="text/javascript" language="javascript">
var reloadTimer = null;
var sURL = unescape(window.location.pathname);
function setReloadTime(secs)
{ if (arguments.length == 1)
{ if (reloadTimer) clearTimeout(reloadTimer);
reloadTimer = setTimeout("setReloadTime()", Math.ceil(parseFloat (secs)*1000));
}
else
{ reloadTimer = null;
location.reload(true);
window.location.replace( sURL );
}
}
setReloadTime(); //Here was where I had 300
</script>
You can add parameter Contents=1 to URL of the webpart page. It displays page in setup mode allowing you to remove webpart from the page. The final URL will look like this http://portal.contoso.com/page.aspx?Contents=1
I've recently created a separate mobile skin for a website. The site serves the mobile version of a page based on the screen size of the device it is being viewed on using the following code.
<script type="text/javascript">
if (screen.width <= 600) {
window.location = "mobile/";
}
</script>
I'd now like to add a "view desktop version" link at the bottom of the page. Naturally, with the above code in the header of each page, it just detects the screen size again and loops back.
Could someone please suggest how I could get around this. I suspect this will be a session or a cookie but I'm very new to java and don't know how to set these up.
thanks in advance for any advice.
This should be handled by the viewport in the metatag of your website. The use of jquery can allow users to opt out of responsive design:
var targetWidth = 980;
$('#view-full').bind('click', function(){
$('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
});
See this link for more clarification.
To detect if link was clicked you can:
Add a specific query parameter (like ?forceDesktop=true) which should be removed if returned to mobile
Use media queries and single skin (see bootstrap)
Maybe look for more elaborate version to detect mobile (link)
Chrome for Android has option to request desktop site (How to request desktop
I've managed to come up with another solution using local storage which is really simple for a beginner like me. It's probably an amateurish way of doing things but it certainly works for my purposes.
So updated the code on the desktop version of the site to:
var GetDesk = 0;
var GetDesk = localStorage.getItem('GetDesk');
//check screen size is less than 600
if (screen.width <= 600) {
//check if there's anything in local storage showing the users requested the desktop
if (GetDesk == 0 ) {
window.location = "/mobile.html";
}
}
then added code to the mobile version of the site to check if the user has previously requested the desktop version:
var GetDesk = localStorage.getItem('GetDesk');
if (GetDesk == 1 ) {
window.location = "/desktop.html";
}
Then at the bottom of the mobile version added the button:
<!-- onclick set the value of GetDesk to 1 and redirect user to desktop site -->
<button onclick="localStorage.setItem('GetDesk','1'); window.location.href = '/desktop.html';">View desktop</button>
As I say, perhaps not the best way but it certainly works and is easy for beginners.