Opening Up Facebook app outside Facebook - javascript

I have a web app which I am loading in Facebook iframes. The thing is my app opens File Picker which sends backs the data form where it was loaded. But if my web app is inside an iframe it doesn't allow File picker to communicate back due to security reasons.
So what I am doing it when the users on my FB page click on my app I take them out of the facebook and open my web app in browser. This thing works perfectly in Android or on my Windows. But in Iphone it doesn't takes the app outside and doesn't open it in the browser.
Do you know why? Is there a solution for it?

Seems the problem is a security feature of the browser's popup blocker.
It treats the window as a popup if it occurs outside of the callback of a user interaction.
It therefore gets buckets as a popup and blocked.
Unfortunately, iOS Safari gives absolutely no indication of this, making the issue difficult to track down.

Related

Open Android "real" browser when link clicked in embedded/system browser with JavaScript

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.

Kiosk chrome app: navigate to URL

I have built a Chrome App which needs to load some websites inside its own window.
The purpose is to display full-screen contents on TVs using Google Chromeboxes in Kiosk mode.
I can't use iframes as the content I must load doesn't allow it.
My researches led me to some code like :
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': event.target.href})
})
This seems to open a new tab on the browser running the extension, but not in the extension window.
The vision I have about chrome apps may be confused as it's the first I'm developing, please don't hesitate to tell me the basics I would not have heard of
You need to use the <webview> tag, available in Chrome Apps, to embed external content.
This does not trigger anti-framing protection, since from the point of view of web security each <webview> is a top-level browsing context.
Note the limitations of <webview>: some web features like message boxes or permission requests have to be implemented by you.
As an example of webview usage, see the Browser sample app.

Facebook JS API does not work with progressive web app

I have a "Progressive Web App" installed to my phone's homescreen.
The Facebook Javascript SDK it trying to open a login dialog popup window using window.open.
This results in an about:blank tab being opened in Chrome which never loads, and never redirects the user back to the web app.
Does anyone have any advice or experience with this problem? I imagine since these "Homescreen Apps" are fairly new, this might not be a well known issue (yet).
Looks like it was a bug with Chrome itself. Should be fixed by now (Chrome 68 was released the 24th of July).

Open non-whitelisted URLs in Cordova in ChildBrowser rather than main Webview

I'm trying to implement the official Twitter and Facebook share buttons in my Cordova/Phonegap app, and I'm running into major difficulties with them. Both of them attempt to load an iframe element to display their buttons, which works, but clicking either of them causes them to open in the Webview, with no way to open them instead in the ChildBrowser. This becomes an issue when the user is done sharing but can't go back to the app due to a lack of navigation buttons.
Is there some way to open a list of URLs in ChildBrowser by default instead of Webview?
Well you can use the:
ChildBrowser.showWebPage();
command to open non-white listed URL's.
Coming in 2.3.0 we will overload window.open() in so that you can specify whether or not you want the url opened in the main web view, the OS browser or the special in app browser that does not have access to the Cordova API.

Bad PayPal Digital Goods Express Checkout experience in Mobile Safari (iPad): popups are opened as tabs

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.

Categories