View full website, not mobile version on iPhone - javascript

I have a script that detects whether you're an iPhone user or not and redirects to a more iPhone friendly page.
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
location.replace("http://domain.com/iphone/");
}
</script>
This works great but has one problem. It is convention to offer the user the ability to view the full web page. However, if I link to the root, obviously the redirect is going to send them to the mobile version!
Any ideas on how to include if click on the link from /iphone/, they can go to / and stay there.

When the user arrives, determine their browser type - mobile or full - and set a cookie with this value. Use this cookie value to decide what version of the site to display. AS you mention, offer a link to the "full" site to the mobile users, but if they click it, run a quick script to update the cookie to the "full" value and then redirect them to the full site. Their cookie is now set for the full site, so they won't get bounced back to the mobile site.
Now, if cookie are a problem, you could use something like PHP to set a session values to maintain the full/mobile status of the session, but that's probably getting beyond the scope of the original question.

The Query String is the way to go ( as the others have said above). Looking at Facebook, if you click on the 'full site' link on the mobile site, it redirects to www.facebook.com/login.php?m2w - the m2w is probably MobileToWeb and this will prevent the site redirecting the user to the mobile site.

Related

is there a way to determine if the user is visiting my website via iphone bookmark (add to home screen) in javascript?

i have a dialog in my website's home page that opens if the iphone users are visiting my website for the first time and inside the dialog i'm suggesting users to add my website to their home screen for a quicker access.
i also set a variable to true in cookies that expires within a week for not opening the dialog for the next week if the user visits again.
my problem is that i don't want to show the dialog at all when the user is visiting via the bookmark.
is there a way to do that?
No. I do not think there is a way which can tell you if you were visited by a bookmark or via a browser on the iPhone. You can find out whether the user was an iPhone or Android user, or any OS for that matter.
Once a user clicks a link on their phone, the phone takes them to a browser or opens a "WebView" depending on the link. Even the WebViews might report only the phone type and basic info. when you query for it.
So, basically, No!
you can add one GET when generate url of the marker,
like ?m=1,
to check it from
js with window.location.search

Add possibility to go back in history in new site

I have a website (e.g. www.foo.com) and redirect to another (e.g. www.bar.com) via window.location. Unfortunately the website runs in fullscreen-mode (so no address bar available) and the user interacts with it by touch inputs (no keyboard, no mouse).
Is it somehow possible to go back from www.bar.com to www.foo.com? Does jQuery do the trick?
UPDATE 1:
My problem is, that I dont have any access to www.bar.com.
history.back(); works fine, but I cannot just add another button to the
foreign website, can I?
To be more exact:
I refer from my website to www.google.com. How can I go back from www.google.com to my website?
If you advise me to use history.back() in the other website (e.g. here), please tell me how
I am very thankful
did you try window.history.back(); ?
I think you can do it with document.referrer It returns the URI of the page that linked to this page. w3c

I'm setting global cookies, but can't seem to access them on subsequent page loads

So I've been searching for the answer to this over the past couple days. This has been my first foray into cookies, so I hope this will be an easy one for you guys. I have a website that asks the user if they want to use the mobile version of the site and stores their response in a cookie so that next time they visit, they're automatically taken to their preferred version. On the mobile site however, I provide a link back to "/desktop.html" on the desktop site which resets their preference to the desktop version of the site and then loads the corresponding desktop version of the page they were on on the mobile site. That's all well & good but I quickly discovered that the cookie plan was not working. The user would automatically be redirected back to the mobile site. I discovered that this is because "desktop.html" was at the root level of the site and all the other pages were in subdirectories. So I read that you can make cookies global by appending ";path=/;" to the cookie. I did that to all my pages. However, I kept getting bounced back to the mobile site despite emptying my cookies from the browser and starting afresh (and I even kept getting asked for my preference each time I went to the desktop site despite setting a cookie each time), so I decided to check the cookie value by putting it in an alert in the pages in the subdirectories and each time any of the pages in the subdirectories are loaded, the cookie has been null/empty. If I remove ";path=/;", then the cookies I access have the values I'd set on a previous page load and everything works except for the explicit reset in /desktop.html. I figure I must not be accessing the "global" cookie I'd previously set. All the pages I'd found say to set a global cookie using that ";path=/;" string, but none of the pages I've been able to find seem to tell me how to access it on subsequent page loads - or I'm just too much of a noob to realize I'm doing something wrong.
Here's the code in /desktop.html
<body style="background: rgb(165, 183, 156); margin: 0pt;" onload="document.cookie = 'desktop; path=/';alert('Preference saved. To get back to the mobile site, click the mobile icon in the bottom left corner.');window.location.href='index.html';">Desktop Preference Saved</BODY>
And here's the code that's in all the pages in the subdirectories:
<body style="background: rgb(165, 183, 156); margin: 0pt; " onload="onPageLoad();if(document.cookie.length != 0){if(document.cookie.match('mobile') && isMobile.any()){window.location.href=getMobileURL()}}else if(isMobile.any() && confirm('Go to mobile version of site?\nNote: menu navigation on the regular website does not work on a touch screen.')){window.location.href=getMobileURL();document.cookie = 'mobile; path=/';}else{document.cookie = 'desktop; path=/';if(isMobile.any()){alert('Preference saved. To get to the mobile site, click the mobile icon in the bottom left corner.');}}" onunload="onPageUnload();">
I don't think they're relevant, but let me know if you need to see the functions getMobileURL() and isMobile.*.
Thanks,
Rob
When you do not set a value, that cookie is being set to be deleted, that is why nothing is being read on the next page. Set a value and it will work.
document.cookie = 'desktop=true;...
Cookies explained in depth on quirksmode.

Facebook 'Like' Dialog Appears and Immediately Disappears

I've been having an issue with the Facebook Like button for quite some time. I've looked all over for a solution but am quite stuck. The error occurs on my site www.MapYourVote.com. When you go to a poll page and click 'Like' the dialog appears and quickly disappears. At the same time, the counter also goes to 1 and quickly goes back to 0.
The problem is always solved for individual poll pages by using the Facebook Debug tool (http://developers.facebook.com/tools/debug). Once you use it on the url, the like button will work as expected. The issue is my website is dynamic and I can't use the Facebook Debug tool every time someone creates a new poll. The Facebook Debug tool does not reveal any problems (apart from og image size but I doubt that's the issue).
Here is an example of a page in which the Like button does not work. If you were to enter this url into the Facebook Debug tool, the Like button would work.
http://www.mapyourvote.com/Poll/Election-Result-Feelings/
Any help would be much appreciated!
I also had this problem. I was constructing a referrer url to give link-sharers a credit, so there was a different url for each user that wanted to share something. The referrer link would give the user credit and redirect to the login page of my site. With this configuration, the like dialog would appear for a moment and then disappear again, unless I went to facebook's debug tool.
What fixed the problem for me was to change from a redirect to rendering the page directly from my referral link. In fact, I changed the referral link to be a ?r=refid parameter on my root page URL. It appears to work correctly if facebook doesn't have to follow a redirect to get the og: data.
I had a similar problem and it turned out I had too restrictive cookie policy set in my browser - I only allowed Facebook to use 1st party cookies. When I allowed Facebook to use other cookies, the problem was solved. It's hard to debug when no error appears other than the immediate pop-up closeup.
I had the same problem. It was caused by url value in data-href attribute. I had there url pointing to my localhost.
When I changed the url to existing one, problem was solved.
Hope it helps
For me, the problem (Like popup disappearing after a second) was happening when the Like button URL redirected to another URL.
The fix was to add og:type, og:url, and og:title (required per https://developers.facebook.com/docs/reference/opengraph/object-type/website), then running the URL through the Facebook debugger to clear the cache (https://developers.facebook.com/tools/debug).
More at https://stackoverflow.com/a/16597060/2391566

how do I write javascript to redirect on a home page, if screen.width <=480, only once, upon it's first encounter by a mobile device

I have created a redirect based on screen width.
The page is https://galleryofjewels.businesscatalyst.com/home
I would like the redirect to only happen once, when the mobile phone first encounters “home” here: https://galleryofjewels.businesscatalyst.com/home
I am redirecting the “home” page to a page called “about-us-mobile” designed for 480 or less screen width using this javascript:
if (screen.width <= 480) {
document.location = "about-us-mobile ";
}
I only have 2 pages that are optimized for the 480 or less and a link “shop”on those two pages which go back to galleryofjewels.businesscatalyst
I want the mobile phone to click the “shop” button to see the full “home” page without being redirected again to “about-us-mobile”.
So I created a page which is a copy of the “home” page and called it “home_full_site_shop”. It has no redirect on it. The “shop” button on the mobile pages links to this page.
If the mobile phone eventually tries to link back to the home page again via the “shop” button on any page of galleryofjewels.businesscatalyst I would like it Not to redirect again to “about-us-mobile”.
In short, I would like the redirect to only happen once, when the mobile phone first encounters the galleryofjewels.businesscatalyst home page
If you're tying yourself to just JavaScript, your best bet is probably to use a GET variable that is set once your site recognizes the dimensions. This variable being set would indicate to each page that the relevant links should go to the mobile-optimized pages (you could dynamically create the links based on the existence [or not] of this GET var). You could actually avoid both redirects this way. Just pass the GET variable around on each click within your site (this can be done by dynamically modifying all page links onload).
If you also have server-side options (PHP maybe), you have a prettier option. You could use a session/cookie to store whether the current user is mobile or not and send the web browser appropriate links after the session is set.
Simple, by setting a (in legal terms: technical) cookie (that contains no unique information).
The cookie-option is pretty cross-browser supported and well-documented (unless users turned them of, which is quite the rage at the moment due to awareness-tools like collusion). In that case there a 'problem' for the user if you do not have some fall-back mechanism or graceful degradation.
Should you also depend on javascript, then there are 2 requirements to your site:cookies and javascript.
So although javascript/cookie route is easy to implement, in the long run it does not hurt to look a little further:
Or you could dive into local web-storage with all it's current quirks
And you could log it on your server with a database based on IP or something like that.
Yet another option would be (if you render the html serverside anyway) to rewrite/change all links (using GET variables) in the document and scripts...
Or .htaccess mod-rewrite..?
I'm on a roll...
You could also use 2 sub-domains: Catch the user at the front-door, redirecting them to your resolution/app-specific subdomain, and do this using the javascript-function history.replace(); This way the user cannot navigate back in the history to the 'front-door', hence he is trapped ultimately to the root of the subdomain.
Tada :P
So the proper long-term solution to this requirement starts with making a choice..
if (window.innerWidth <= 480) {
window.location = "https://galleryofjewels.businesscatalyst.com/home";
}

Categories