Launch mobile Safari from UIWebView *without* modifying app source? - javascript

I'm developing a small site that will only be viewed in-app inside a UIWebView, and one page has several links to an external website. I'd like these to open in mobile Safari, but all links inside the app load within the webview. Modifying the source of the app isn't an option since the site needs to be live before any changes could be submitted.
Is there a way to force a link inside a UIWebView to launch mobile Safari using HTML/5 or Javascript? Mimic shouldStartLoadWithRequest? Sneaky, hacky workarounds or brilliant alternate solutions?
(And, out of sheer curiosity... why not?)

It would be bad design to let sites access the frameworks on the iPhone via simple HTML. This would open up all sorts of security holes. Its not web behavior you want to alter, so I think you may need to change the app source. I still don't understand why that isn't an option. Could you go into more depth?

One option would be to add a custom URL handler. Your website could then determine if the "broswer" is the app and serve custom URLs for those links you'd like to maintain (aka open) in your app. Then, any standard HTTP/s URLs would open in Mobile Safari.
In other words, have your web server provide urls like myappurl:// for the links you'd like your app to handle, and http:// which would open Mobile Safari.

Related

How to detect if the site is loaded inside an iframe on a mobile device?

The website I'm developing recently uses Bootstrap framework. There is no problem about responsiveness while directly visiting the site.
There is another domain name (domainB) and I'm using URL embed method and it loads the actual site.
While visiting the domainB on a mobile device, the responsiveness doesn't work, it loads the desktop site not the mobile-size one.
So, my question:
How to detect if the site is loaded inside an iframe on a mobile device?
I saw that question and by that method it can be understood if the webpage is being loaded inside an iframe but how to detect if the visitor is on a mobile device?
(I don't have any code control on domainB, the URL embed feature is served by domain name registrar company.)
(There could be some SEO issues about this, I know this.)
You could use the mdetect.js script from MobileESP to check if the page is loaded on a mobile device. The method DetectMobileQuick() seems to do what you want, you can find an example here . As described on the MobileESP page, this approach may not work for older phones, including older BlackBerry, PalmOS, and Windows Mobile devices, that have poor support for Javascript. You may also want to check out this post that describes how you can use bootstrap to determine the size of the device view being used.
How to detect which device view you're on using Twitter Bootstrap API?

How to break out of Twitter in-app browser in Android?

I have a typical modern web-app, regularly shared on Twitter.
I recently noticed that, when opening our web-app in the Twitter internal browser, localstorage is deactivated, which breaks our app.
How could I break out of the Twitter internal browser and open the page in the default Android browser?
I haven't tried this but just a suggestion. You could take a look at this and give it a try.
At the end of the article, it says that the external app won't be invoked if triggered without a user gesture but I believe that the limitation won't be there in case of the In-App browser.
Well, I think it isn't quite easy to say Android via a WebView to open the Chrome Browser as this in-app browser could be a lot different.
What you could try, as mentioned in the article Here is to trigger a click on an anchor which is calling an "pseudo" intent and add the fallback_url .
There isn't much details provided but it could be a possible hack / workaround.
In your HTML
...
And with JS:
$(".open_me").trigger("click");
According to the article
Now the URL will get you to zxing.org if the app could not be found, or the link was triggered from JavaScript without user gesture
(or for other cases where we don’t launch an external application.)
If you're lucky it will open the fallback_url, but as mentioned before it is a WebView which isn't the same as the Chrome Browser, therefore it is possible that nothing happens.
You can use a iFrame in your HTML like this:
<iframe src="url.com" width="900" height=400"></iframe>

Android Webview and history.pushState?

The Android Webview allows an Android application to handle a user clicking on a link by opening the destination within the webview, instead of opening it in an external browser.
It is then possible to maintain a history of these page loads so that a user can go forward and backward within the webview, much like a "real" browser:
http://developer.android.com/guide/webapps/webview.html#NavigatingHistory
My questions are:
Can the Android webview history management "natively" handle a webpage pushing to the history stack using something like window.history.pushState?
If so, what data structures/API are used to manage the history? How does the webview differentiate between two versions of the page that have the same URL but different DOM states?
If not, can such support be implemented by an application developer?
Which HTML5 APIs (if any) does the Webview support?

Build html5 javascript only using file :// uri protocol page for mobiles

I don't know if I googled it correctly but I could not find the answer for my question.
I'd like to know if it's possible to code a html5 with javascript (maybe jquery mobile for the UI) and css without using "native compilers/builders" like sencha touch or phonegap and store the page locally (using file:// protocol).
E.g: Let's say that I want to build a simple HTML5 calculator. I don't want any server-side processing, I just want some html buttons to call javascript functions to perform client side only operations. If I make such page, let's call it calc.html and download it to the mobile (via usb/http download), can I open this calc.html with the internal browser and use the calculator? Or do I have to compile/build this calc.html into a Webview (for Android) or something like it to get it done?
Would this work for Android, IPhone, Windows Phone and others with localStorage/sessionStorage?
You want an Offline Web Application.
This article seems to explains step by step how to do this.
http://diveintohtml5.info/offline.html
Creating a website like this, will allow you to bookmark it and have a shortcut icon in the phone's dashboard that will allow you to load your page in the browser for those cases where you don't have a data connection. In the case where the phone has a data connection, it will load the manifest to check if there are any new files to update the application. I don't think there is a way to make it truly offline though.

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.

Categories