Clicking on a link inside a webview that will trigger a native iOS screen (with params passed from the webview)

Question

Looking at the Facebook iOS app, one can see that when in the feed (for example), clicking on comment will pop a native iOS dialog, as well as clicking on a photo, will also pop a native iOS screen just for that purpose. Or clicking on Comments will load a different iOS screen for that.

I'm working on an hybrid iOS app (html5 + obj-c) and would love for this kind of functionality. I've checked:

http://en.wikipedia.org/wiki/Multiple_phone_web-based_application_framework

But can't tell which is the best suited. For example, phonegap is very very popular, but not sure if this kind implementation with it (the "native bridge") is something possible. Even if so, if it will require me to handle a major learning curve (it's syntax and writing a special plugin). What would you have done? Which FW is the most appropriate. I don't use ANY system functionality such as camera / file system / etc.. the phonegap offers except for that native bridge, so think about frame work size wise and that is the ONLY part i need. That being said , the app isn't to be 100% phonegap or 100% native.

I presume sencha touch 2 is out of the question for this requirement goals

Answer 1

Yes you can, using a custom protocol.

In your html, declare your JS calling function:

function callIt(paramText) {
    var iframe = document.createElement("IFRAME");
    iframe.setAttribute("src", "my-protocol://" + paramText.replace(/ /gi,'%20'));
    document.documentElement.appendChild(iframe);
    iframe.parentNode.removeChild(iframe);
    iframe = null;
}

On iOS, you will intercept the call using in your webView delegate method webView:shouldStartLoadWithRequest:navigationType:

Check if the request has your "my-protocol:" prefix. In this case, extract your parameter from the request using the example "://" separator (you can also use any separator that you wish), and return NO.