I have embedded the Facebook Javascript SDK in my website as well as a like button for a specific facebook page.
When a user clicks the like button and wasn't logged into Facebook, their login process triggers. This works fine in desktop browsers and recent Chrome/Safari versions for mobile devices.
I do, however, need to use QR codes to get people to my site. Some QR code reader apps open URLs in their own crippled browsers (e.g. "QR Code Reader" for Android).
These browsers get stuck after someone enters the credentials and clicks "Login" (the URL at this point is extremly long, starting with "https://www.facebook.com/plugins/close_popup.php?reload=https..."). Could this be due to their lack of tabs?
Is there any way to fix this or can I at least check the user's browser (in Javascript) and show them a message, that they should open this page in a current version of e.g. Chrome/Safari?
edit:
Okay, I somewhat got it to work by using this solution and only allowing certain detected browser versions (Safari & Chrome 4+, Opera, IE 10+). It's not ideal and seems fragile, but it works for now. I'd still prefer the login working on those browsers, though. :/
Related
I'm driving traffic to a landing page with PPC on Twitter. Naturally, when they click on the ad in the Twitter app, it opens "embedded" in Twitter, which is usually WebView, but sometimes some vendor specific browser such as MIUI.
The issue I have is that 1/3rd+ of my traffic is running on Android 10 or earlier, and the Stripe code doesn't work in WebView (but it does work in Chrome on the same devices). So, what I'd like is to write a little bit of JavaScript that detects the OS version, and whether it's one of these system webview browsers instead of the "real" browser, and then insert something like:
"Unfortunately, this browser doesn't support payments. Please open this page in your phone's browser, or click this link".
Where the "click this link" link opens the same page in the "real" browser. Of course, I could just have the rest of the text without the link, but it seems like a better UX to me this way, if it's possible.
There's a similar question from 2015 that indicates it's possible in Java, but I'm not writing an app, this is just a web page, so I'm wondering if it's possible/how to do it in JavaScript.
I've got a web app that requires the ability to print. Facebook's in-app implementation of Chrome doesn't allow printing. Currently, I'm giving the user instructions on how to open in chrome themselves in place of the print button I give normal users. But I'd prefer to just open Chrome for them when they get to that page, or at the very least provide a button/link that would open the page in Chrome instead of forcing them to find the settings button and figure out how to open Chrome themselves.
I've tried using the googlechrome://myurl.com approach, and Chrome opens, but the specified url doesn't load.
I've looked into Google's Intent option but I wasn't able to figure out how to open Chrome with that method.
Is there a way to accomplish this in javascript? or by some url scheme in an href attribute?
So far, all the other answers I've found give explanations for how to do this from an Android App, but not from a website.
** Update: The googlechrome://myurl.com seems to work fine from iOS in the native facebook app. It does not appear to work correctly using the native facebook app in Android.
Try
googlechrome://navigate?url=example.com
for Android users.
Reference from https://stackoverflow.com/a/12013755/9514189
I am using the Google+ Javascript API log in button and it works perfectly fine in Chrome on Windows and Android. It also works perfectly fine in Safari on an iPad and iPhone. However, when using Chrome on the iPad or iPhone, the pop-up tab for the Google log in never returns after clicking to allow access. It seems to be submitting the form to the pop-up tab and never directing back to the original tab. Any ideas?
Google knows about this issue, but currently cannot do anything about it. It comes down to window.open not working in UIWebview.
Safari is not limited by App Store rules the way all third-party apps
are. Apple can use any WebKit APIs they want to, whereas we are
constrained to what is possible using UIWebView.
They encourage anyone facing this issue to open a bug with Apple.
You can't make Apple do anything, but anyone affected by this can
file a bug against Apple about the fact that UIWebView doesn't support
window.open and subsequent cross-site scripting, to clearly
communicate demand for that support.
There's no way for people to add votes or comments to existing Apple
bug reports, so the usual advice is for everyone to file their own.
Here's the URL for bug reporting in Apple: https://bugreport.apple.com
Here is a sample bug posting to Apple provided by one of the users:
Summary: Please add support for window.open and subsequent cross-site
scripting to UIWebView. This is blocking Facebook/Twitter/etc login
workflows in Chrome for iOS for example
Steps to Reproduce:
1. In a tab, open a page that runs the code var w = window.open(yourURL, null, null);
2. The page at yourURL should try to accesswindow.opener`, such as to postMessage back to the original page
3. Don't profit.
Expected Results: New window can access window.opener.
Actual Results: window.opener is undefined.
Version:
7.0.4
Notes:
Configuration: Chrome Version (from "Settings > About Google Chrome"):
19.0.1084.60 Device Type: iPad 3
You can follow the issue thread for updates.
I have been implementing PayPal Digital Goods Express Checkout in my (HTML5) web app to enable the 'in-app' purchase of extra app content. In my desktop browsers (Chrome, Safari, Firefox) the digital goods flow works without problems. In that flow popup windows are opened at some points, for instance when the user clicks the login button or the button to pay with his creditcard (i.e. without having a paypal account). The popups are no problem for the desktop browsers. However, in Mobile Safari on my iPad 2 popup windows are always opened as (new) tabs, even if a property string containing width, height, etc. is passed to a JavaScript window.open() command. This makes it impossible to implement PayPal Digital Goods Express Checkout and have a good user experience in both desktop browsers and Mobile Safari. When the web app is run full-screen on the iPad (using an icon on the home screen) opening the popups becomes even more problematic (or impossible).
In trying to solve my problem I came up with the following options, none of which has yet led to satisfying results:
Customize the payment flow. Of course this is possible to some point, but after having redirected the user to the 'incontext' Express Checkout page that forces the user to login to PayPal, customization is out of my hands (as far as I know). For instance, I cannot customize the login process itself and make it work in an iframe (instead of a popup window) instead. It would be cool if there were some advanced API commands that I could use server-side to make the user login to PayPal myself, using my own (iframed) login form, but this seems too far-fetched.
Make popup windows work like expected in Mobile Safari, preferably also when a web app is run full-screen. I don't think it strange that Mobile Safari opens new windows as tabs (there are other browsers that do this). I do think it is strange that popup windows that are opened from JavaScript, using window.open and a property string that defines the window's position and dimensions, are opened as tabs. Does anyone know how to make Mobile Safari open such popup windows normally without requiring the users to change some browser setting?
To demonstrate my problem (and show that I am not the only one facing it, though this site's owner probably doesn't know it ;-), go to digitalmagazine.autosport.com with your iPad and click the 'Pay with PayPal' button at the top-left of the page. Click the login button in the PayPal iframe. The site disappears and the login page (that is supposed to be opened in a popup window for an 'in-app' experience) opens full page.
I have also looked at the client side (JavaScript) techniques that are used by similar in-app payment systems, but those (understandably) also use popup windows. Therefore I would prefer the second solution that I have described above. That one will also involve much less work.
While PayPal supports the mobile platform, you will need to make some changes to fully implement it for iOS and other mobile operating systems. You will find the PayPal Mobile overview here: https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_api_ECOnMobileDevices
The process starts with changing the redirect command in Express Checkout flow to _expresscheckout-mobile, and then steps through a list of additional requirements for full implementation. Read the documentation carefully, as it can be a bit picky when it comes to supported NVP fields.
Can someone tell me how I can determine (using JavaScript etc.) what browser is being used to visit my site?
I want to redirect to a different page based on these scenarios:
Wheater the user is browsing using Safari on the iPhone.
Using IE on a desktop
Using IE on a WP7 mobile device.
Thanks.
Check out the Javascript Navigator object:
http://www.w3schools.com/js/js_browser.asp
alert(navigator.userAgent);
This script may help you for more complicated detection:
http://www.quirksmode.org/js/detect.html
You should be handling these redirections server-side though. This is particularly true if you have a mobile version of your site. Most mobile browsers do support Javascript just fine, but there are quirks.
Server-side, you can send a redirect by sending the 302 status code, and the location: header. See http://en.wikipedia.org/wiki/HTTP_location
Edit: Since you say that you need to detect mobile browsers now in your comments, just use this script: http://detectmobilebrowsers.mobi/