I need to rewrite a javascript code into typescript (angular), the webpage is opened by an IOS app or an Android app. I just want to send a message to the application.

How can i do to send a message to the parent app or how can i use window.webkit ?

notifyTheApp(postData) {
  if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    if(window.webkit.messageHandlers)      
     window.webkit.messageHandlers.mpos.postMessage(JSON.stringify(postData));
    } 
    else {
      if(window.external.notify)
        window.external.notify(JSON.stringify(postData));
    }

mpos is the iOS application

ERROR in src/app/sms-validation/sms-validationponent.ts(98,17): error TS2339: Property 'webkit' does not exist on type 'Window'.

I need to rewrite a javascript code into typescript (angular), the webpage is opened by an IOS app or an Android app. I just want to send a message to the application.

How can i do to send a message to the parent app or how can i use window.webkit ?

notifyTheApp(postData) {
  if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    if(window.webkit.messageHandlers)      
     window.webkit.messageHandlers.mpos.postMessage(JSON.stringify(postData));
    } 
    else {
      if(window.external.notify)
        window.external.notify(JSON.stringify(postData));
    }

mpos is the iOS application

ERROR in src/app/sms-validation/sms-validation.component.ts(98,17): error TS2339: Property 'webkit' does not exist on type 'Window'.

• javascript
• angular
• typescript
• webkit

4 Answers 4

You can use type assertion (https://basarat.gitbooks.io/typescript/content/docs/types/type-assertion.html) to temporarily cast window the any type. You will loose intellisense for that statement though.

(window as any).webkit.messageHandlers

I reckon window.webkit is pretty far from the standard, and it's therefore not part of the window type in Typescript. You can add it like this:

interface Window {
    webkit?: any;
}

declare var window: Window;

Note that webkit? means that the property is optional, so you should do some checking on whether the property exists or not.

Just add in any loaded typescript file.

declare global{
  interface Window {
    webkit?: {
      messageHandlers: {
        [x:string]: {
          postMessage: (data: string) => void;
        };
    };
  };
};

Then you can use:

// Without ts error ✅
window.webkit?.messageHandlers.yourKey?.postMessage("test")

I guest you are using webView if you not forget window.webkit . You must define it first , by default there is no object (in window):

  window.webkit

Just add it :

 let contentController = self.webView.configuration.userContentController
 contentController.addScriptMessageHandler(self, name: "callbackHandler")


 let config = WKWebViewConfiguration()
 config.userContentController = contentController


 let webView = WKWebView(frame: CGRect.zero, configuration: config)

 // Add callback func 

 func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

     // message.name is "callbackHandler"
     // message.body is ["programming":"js"]
 }

Now you can call in your browser env :

  var message = {'programming':'js'};
  window.webkit.messageHandlers.callbackHandler.postMessage(message);

Reference :

https://developer.apple.com/library/ios/documentation/WebKit/Reference/WKUserContentController_Ref/index.html#//apple_ref/occ/instm/WKUserContentController/addScriptMessageHandler:name: