Here is an example for a Mac Os X App. But should be easily convertible to iOS
The App has a Hype html embedded in the Bundle.
The Hype scene has two buttons that call a really simple Javascript function with the Mouse Click Actions
var pWindow = element.id;
window.webkit.messageHandlers.observe.postMessage(pWindow);
Button 1 (Prefs ) will open a window in the App which is called Prefs
Button 2 (Window 2 ) will open a window in the App which is called Window 2
These buttons use the callback method already shown in the other example above.
The Callback will also populate the innerHTML of a text box in the scene. ( The text comes from the App not the html doc)
In the Apps Window 2 you will see a Button named Run timeline.
This is connected to a IBAction in the App, which will send a direct call to the webpage to run a timeline.
The important think for this part to work is to use the code below inside your Head tag of the hype document.
<script>
function myCallback(hypeDocument, element, event) {
window.myhypedocument = hypeDocument;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
</script>
The Apps IBAction’s code is then :
//-- Direct call From App Action to Webpage
- (IBAction)runTimeline:(id)sender {
NSString *exec_template = @"window.myhypedocument.startTimelineNamed('timeline1');$('#headline').html(\"received: %@\");";
NSString *theMessage = @"Call from App = Run Timeline";
NSString *exec = [NSString stringWithFormat:exec_template, theMessage];
//NSString *exec = [NSString stringWithFormat:exec_template, version];
[_weviewM evaluateJavaScript:exec completionHandler:nil];
}
This is all really simple. and I think much easier to do with Hype than native HTML as we can use the built in function to construct the callback in the page.
i.e from this:
<script type="text/javascript">
$(function () {
var headline = $("#headline");
var selection = $("#selector");
function set_headline (text) {
headline.text(text);
}
function call_native () {
var prop = selection.val();
set_headline("asked for " + prop + "..."); window.webkit.messageHandlers.observe.postMessage(prop);
}
setTimeout(call_native, 1000);
selection.on("change", call_native);
// Expose that function globally
window.call_native = call_native;
});
</script>
To this using a Hype function and actions:
var pWindow = element.id;
window.webkit.messageHandlers.observe.postMessage(pWindow);
Although I admit I am using buttons and not a dropdown… but hopefully you get the idea
Xcode Project
WKViewJavascriptExample.zip (1.0 MB)
Hype doc used:
AppControlTestWithWKWebView.hypetemplate.zip (14.9 KB)