Call javascript function within WKWebView

Using JavaScript with Hype
1

I’m attempting to call a nested function within my hype code from my swift app but it isn’t working (please see the error at the end of the post). Any ideas?

Swift code

var js = "runTimer(44);"
webView.evaluateJavaScript(js)

Javascript

function clock(hypeDocument, element, event) {
function runTimer(numStart) {
baseSec = 0;
baseMin = 0;
baseStd = 0;

firstStart = 1;

setTime();

var idVar = setInterval(setTime, 1000);

    function setTime() {
        var now = new Date();
        var hour = now.getHours();
        if (hour > 12) hour -= 12;

        var stundenzeiger = document.getElementById('stunde');
        if (hour === 0 && minute === 0 && second === 0) baseStd += 360;
        var Winkel = baseStd + (hour * 30 + (minute * 6 / 12));
            
        if(numStart > 0){
           rotate(stundenzeiger, Winkel);
       }
            
            
        numStart = numStart - 1;
        hypeDocument.getElementById('displayNumber').innerHTML = numStart;
        if (numStart < 1) {
            clearInterval(idVar);
        }

        var zehntelSekundenzeiger = document.getElementById('zehntel');
        console.log(numStart)
        if (firstStart) zehntelSekundenzeiger.classList.add("zehntel");
        firstStart = !1;
    }

    function rotate(el, winkel) {
        el.style.webkitTransform = 'rotate(' + winkel + 'deg)';
        el.style.mozTransform = 'rotate(' + winkel + 'deg)';
        el.style.transform = 'rotate(' + winkel + 'deg)';
    }
}

XCode Error

Optional(Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=ReferenceError: Can't find variable: clock, WKJavaScriptExceptionColumnNumber=6, WKJavaScriptExceptionSourceURL=file:///private/var/containers/Bundle/Application/D741AFC0-1BB7-41C0-A029-ED57820CDDEC/Web%20Theatre.app/, NSLocalizedDescription=A JavaScript exception occurred})

}
2

(I reformatted your post with the triple ``` ticks to make code blocks)

The error as listed is Can’t find variable: clock, though in this context I’m not sure why it would report that given what I imagine the setup is. It would probably help if you included a zip of your Xcode project along with the .hype project file.

From the looks of things, you have added a Javascript function called clock() within the Hype document. Inside of that, you have a function called runTimer(). This runTimer() function is scoped within the clock() function, so it isn’t visible to outside code. You will need to adjust the scoping of your functions so it is visible somehow globally. There’s a few different approaches; you could add runTimer() just to a <script> tag in the head HTML (accessed via the Document Inspector) or you could add it to the global window element, like:

window.runTimer = (function (numStart) { 
   // code here
});

If you’re unfamiliar with scoping and how it is coming into play, I recommend googling for “javascript scope” to familiarize yourself.

Functions in Hype are not added directly to the global scope. So if you wanted to access them from code outside of the Hype document you would start with the global HYPE object and get at them that way.

HYPE.documents["documentName"].functions().clock();

Hopefully that will point you in the right direction.

1 Like