I have a joomla site and i have build a jquery mobile website so i use this this code below,
<script type="text/javascript">
<!--
if (screen.width <= 680) {
window.location = "site.com";
}
//-->
</script>
But the my problem is that in my jquery site i have a view full site this code i have put it in index.php of my main template so in every page that joomla creates so user can see this code exist
My question is how i can write this script when the user click from mobile jquery site "view full site" and not again redirect him back to mobile site.
Because when the user press the button view full site went to the full site and after seconds he turn back to mobile cause of this script..
Ideally, the switch should be done server-side, as the overhead in sending the page to the browser only to be redirected is unnecessary.
Here is a link to get you started with that but to focus on a your specific question: You can store the preference in a session variable which is then checked in your conditional above. This can be done either in JavaScript or php.
If you were to stick to your client-side approach above, you could modify the if statement to if (screen.width <= 680 && readCookie('screenpref') != 'desktop') {} after creating your setCookie() and readCookie() functions.
Like Joe said I also reccomend a serverside solution which is way more efficient check this link I just found, which is a quite comprehensive list of user agents you can check to redirect on : http://detectmobilebrowsers.com/
For those of you that don't know the user agent is part of the header of the request and describes the client software that oriniganated the request. Basicly its a string that you can use to identify which device requested your web page.
Related
I'm working on a node-red project with uibuilder node.
It's basically [html, css, js(with vue)] pages.
I want to make the login authorization part where each user opens the allowed pages only.
How can I achieve that? by tokens? by permitting direct access to pages using URL?
P.S. I'm new to this part of web and I tried searching but couldn't find what I need.
I searched a lot, all was dead-end until I found this question
Detect if page was redirected or loaded directly(Javascript)
Instead of getting into trouble with tokens, and checking at each page if it is valid or not.
I permitted accessing any page (except the login) by the URL. If you want to access a page, it's only by redirecting.
I achieved that by checking a variable at page loading if the page has history or not. if no history, it is redirected to the login page.
I added this part to my vue-js file:
window.onload = function() {
if(document.referrer == "") window.location.href = "http://localhost:1880/Login/login.html";
}
P.S. If all the Internet said preventing accessing by URL is impossible, Don't be disappointed. Search more, because it's actually possible. 😉 😉
Currently I have a PHP library that looks at header information and decides what kind of browser/device the user is using to access my site. I hooked up my router to this library so that when a user is at my site, based on what the PHP library say I redirect him to a mobile or desktop version. All this happens in pure PHP.
Now the complication is that many tablet devices have such wide screens that showing them a responsive site for their screen dimension does not really make much sense. I would like it that my router can get information about the screen dimension/viewport of the user and then make the choice instead of just checking if it isTablet().
I know that I need to use Javascript for this. I wanted to check if anyone has experience doing something like this. To keep it clean, I would like my router to be the decision maker, and not have both Javascript and PHP making independent decisions on where to redirect. Is there any library/strategy to handle this use case that anyone has prior experience of?
You can use the windows width to check for a redirect in your <head>, that redirect should set a $_SESSION variable to not show the mobile site in php.
The following method requires that the jQuery library be loaded in <head></head> and placing:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
JS:
if ( $(window).width() > 1000 ) {
document.location = '/no-mobile-redirect.php?set=true';
}
no-mobile-redirect.php would have
<?php
session_start();
$_SESSION['noMobileRedirect'] = isset($_GET['set']);
header("Location: /home");
I'm using code to redirect mobile devices that are under 699 pixels wide to go to our mobile site. This method utilizes JavaScript and cookies and follows some basic logic:
Do not run logic for redirect if cookies are disabled
Do not redirect if cookie skipmobile is set to 1
Redirect only if skipmobile is not 1, and your mobile device is listed below and under 699 pixels wide.
//{{Full Site Code}} Only run logic if cookies are enabled.
if(navigator.cookieEnabled){
//If the cookie skipmobile is already set do not redirect to mobile.
if (document.location.search.indexOf("skipmobile") >= 0) {
document.cookie = "skipmobile=1";
}
//If the device is one of the types listed below and is under 699 pixels wide, redirect to the mobile site.
else if (((/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) && screen.width < 699)
&& document.cookie.indexOf("skipmobile") == -1)
{
document.location = "'.MOBILE_SITE.$direct.'";
}
}
On the mobile site I simply have a link like the following that someone can click to set the cookie
http://www.example.com?skipmobile=1
This code works properly for me and most people, but we are having customers saying When they click the full site link it sends them right back to the mobile site. According to the code this means they do have cookies enabled but their cookie isn't getting set.
Is there something I need to do to this code that's missing?
UPDATE: So this problem is a bit of an oddball. One of our employees is having the issue as well so we at least have a phone to test on. We have a live site and a dev site. It works for him of we go to the dev site and redirect but it doesn't for the live...
Does this help anyone come up with conclusions? The code is the same on both sites.
You should try deleting all cookies related to your site beforehand, as this should clear up any problems. This is a link to a great function that should do this for you:
Clearing all cookies with JavaScript
You could also put that you don't want it to cache for a while in the headers (using the cache control var) to make sure that if the phone is storing any problems these are removed
The scenario I'm going to describe is about Excel, but you can spot the same problem in all Office tools.
Scenario:
In my default browser (NOT Internet Explorer) I'm logged in my own specific website, let's call it www.mypersonalwebsite.com
I have an Excel folder with the A1 cell containing a URL pointing to http://www.mypersonalwebsite.com/url/visible/only/to/loggedin/users
When I click on the URL in A1 cell:
my default browser is trying to open this URL
the website is refusing to serve the page because the request is coming from a non logged in user
So that's the problem: why is the browser complaining about the user session when I'm already logged in? And how can I solve it?
I found many similar questions about this problem on stackoverflow and I think I composed a portable and "definitive" solution to this problem.
First of all: why is the browser complaining about the user session?
The answer is "Microsoft Office Protocol Discovery". In a few words: it's something that works only if you are using Microsoft Windows and your default browser is Internet Explorer.
Basically, if you are not using Microsoft Windows OR your default browser is not Internet Explorer, when you click on an URL, the request sent to the browser will always be with an empty cookie. This means that, despite the default browser could use a correct cookie to authenticate the user, the request coming from Excel will never use it. But if you try to reload the page (and the webserver is not redirecting to a different error page), the browser will use the domain cookie and you'll see the correct page.
Second question: how can I solve this problem?
I think I found a very good solution, composed by an HTML part and a webserver part.
HTML part
Starting from the fact that you need to reload the page to use the cookie, I created a simple static page containing a little javascript code and some html. This is just an example. The main part of this code is here.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<script type='text/javascript'>
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
</script>
<meta charset="UTF-8">
<script type="text/javascript">
window.location.href = getParameterByName('newUrl');
</script>
<title>Page Redirection</title>
</head>
<body>
<!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
If you are not redirected automatically, follow the <a href='<?php echo $newUrl; ?>'>link</a>
</body>
</html>
You can access to the querystring via javascript in many ways, you can find a very interesting thread here.
This static page, let's call it redirect.html, will only do one thing: it will redirect the browser to the page specified in the newUrl parameter. Now if I put in the A1 cell something like:
http://www.mypersonalwebsite.com/redirect.html?newUrl=http://www.mypersonalwebsite.com/url/visible/only/to/loggedin/users
and if I click on this URL:
Excel will go to this URL using the default browser
The browser will open the redirect.html page with an empty cookie
The browser will reload the page using the domain cookie
The user will see the correct page as an authenticated user
The pros of this trick are: it works on all platforms and on all browsers supporting javascript. The cons are that we need to modify all URLs in all our Excel folders.
The webserver part
To hide this redirection to the end users, and save us to modify all our Office documents, we can use another trick. In this example I will use nginx:
if ($http_user_agent ~* "(Excel|PowerPoint|Microsoft Office)") {
rewrite ^/(.*)$ /redirect.html?url=$1 break;
}
The meaning of this little if block is: if the incoming request is from a user agent like Excel, Powerpoint and so on, nginx will do an internal redirection to the redirect.html page, that will again do the browser redirection explained above.
This nginx redirect will completely hide the redirect trick, so we can use the original URLs and the users will always see the correct page.
I'm sure all this can be improved, and I would like to learn how to do it.
I hope this will help someone in finding a complete solution to this Office problem.
I'm testing a few JavaScripts that redirect mobile users from a main website to a mobile website. What I have found uses cookies however, and the cookies seem to prevent returning users from going directly back to the mobile website, without clearing the browser's cookies, not just closing browser.
Can I do this with a variable instead of a cookie? Or PHP?
This simple script looks like it uses use a file value stored, but I can't get it to work.
<script>
if (document.location.search.indexOf("skipmobile") >= 0) {
document.cookie = "skipmobile=1";
}
else if ((document.location.hostname.match(/\.mobi$/) || screen.width < 699)
&& document.cookie.indexOf("skipmobile") == -1)
{
document.location = "mobile/";
}
</script>`
Mobile side link to full site has this ending:
http://www.domain.com/?skipmobile=1`
Any suggestions appreciated.
I chanced upon this article that you have, I am Neil and I work for handsetdetection.com. Just to let everyone of your reader know that there is also another way of redirecting your viewer to a mobile site that you have and automatically adjust the screen size and buttons to whatever type of mobile device they are using. However, having a mobile version of your site is not enough, you have to redirect your visitors from your main website to a mobile version of your site. It is called handsetdetection and it is quite easy to install as a plug in to any back end of your site.
Hope this helps,
Neil Summers