IOS Not working

[kriefsacha]

Which platform(s) does your issue occur on?

• iOS/Android/Both - iOS
• iOS/Android versions - 13.1
• emulator or device. What type of device? Which modal of device? emulator , any modal of it

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) 6.1.2
• iOS: XCode version. 11.1
• nodejs: (run node --version to fetch it) 10.16.2
• tns-core-modules: (run npm ls tns-core-modules in your project to fetch it.) 6.0.1
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project) tns-ios 6.0.1
• Plugin(s): (look for the version numbers in the package.json file of your project and paste your dependencies and devDependencies here)

"dependencies": {
        "@angular/animations": "8.0.0",
        "@angular/common": "8.0.0",
        "@angular/compiler": "8.0.0",
        "@angular/core": "8.0.0",
        "@angular/forms": "8.0.0",
        "@angular/http": "8.0.0-beta.10",
        "@angular/platform-browser": "8.0.0",
        "@angular/platform-browser-dynamic": "8.0.0",
        "@angular/router": "8.0.0",
        "@nota/nativescript-webview-ext": "6.0.0-alpha.2",
        "nativescript-angular": "8.0.2",
        "nativescript-plugin-firebase": "9.0.2",
        "nativescript-theme-core": "~1.0.4",
        "reflect-metadata": "~0.1.12",
        "rxjs": "~6.3.0",
        "tns-core-modules": "6.0.1",
        "tns-platform-declarations": "^6.1.2",
        "zone.js": "0.9.1"
    },
    "devDependencies": {
        "@angular/compiler-cli": "8.0.0",
        "@nativescript/schematics": "~0.5.0",
        "@ngtools/webpack": "8.0.0",
        "nativescript-dev-webpack": "1.0.1",
        "typescript": "3.4.5"
    }

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

I just created a new project. Puted the webview and code I saw on your readme. On IOS nothing is appearing , on android it's working fine. I see all the consoles logs , even of the callback of the javascript sent to the web view but nothing appears at all.

Is there any code involved?

• If possible provide an example project demonstrating the issue.
• Provide a code example to recreate the problem

This is the home page of the app (first page appearing) HTML

<ActionBar title="My App" class="action-bar">
</ActionBar>

<StackLayout class="page">
    <WebViewExt #webView id="webView" (loaded)="webViewLoaded($event)" debugMode="true" style="border:10px solid black"></WebViewExt>
</StackLayout>

TS

import { Component, OnInit } from "@angular/core";
import { LoadEventData, LoadFinishedEventData, WebViewExt, WebConsoleEventData } from "@nota/nativescript-webview-ext";
import { Step } from "../models/step-model";
const firebase = require("nativescript-plugin-firebase/app");
firebase.initializeApp({
    persist: false
});

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html"
})
export class ItemsComponent implements OnInit {
    webViewInterface: WebViewExt;
    isOn = false;
    constructor() { }

    ngOnInit(): void {
    }

    public webViewLoaded(args: LoadEventData) {
        console.log("view loaded")
        if (!this.webViewInterface) {

            console.log('webview loaded');

            // this.handleLoader(true);

            this.webViewInterface = args.object;

            this.webViewInterface.src = 'https://www.google.com';

            this.webViewInterface.on(WebViewExt.loadFinishedEvent, (args2: LoadFinishedEventData) => {
                if (this.isOn === false) {
                    this.isOn = true;
                    this.webViewInterface.executeJavaScript("document.location.href='https://www.facebook.com'").then(res => {
                        console.log('res ' + res);
                    })
                }
            })
        }
    }

}

Screenshot result

[m-abs]

Hey @kriefsacha

Thank you for your bug rapport.

I can't test on iOS 13 before tomorrow or early next week, but the problem might be the WebViewExt getting a height of 0, because of the StackLayout.

Could you try with:

<GridLayout rows="*" columns="*" class="page">
    <WebViewExt #webView id="webView" (loaded)="webViewLoaded($event)" debugMode="true" style="border:10px solid black"></WebViewExt>
</GridLayout>

And could you test it on the latest tns-core-modules@6.1.1 and tns-ios@6.1.1-runtime?

[kriefsacha]

Hey @m-abs , sorry for the long time It took me to answer.

It actually worked. I just have a little problem now. When I send javascript to the WebView like 'document.location' it's working. But when I send for loop or something it's not working anymore. Here an exemple when I only do a variable and try to return it.

Exemple :

this.webViewInterface.on(WebViewExt.loadFinishedEvent, (args2: LoadFinishedEventData) => {
                if (this.isOn === false) {
                    this.isOn = true;
                    console.log('now');
                    this.webViewInterface.executeJavaScript("var x = 0; x;").then(res => {
                        console.log('res ' + res);
                    })
                }
            })

Error message :

CONSOLE ERROR file:///node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:676:0: Unhandled Promise rejection: Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=5, WKJavaScriptExceptionMessage=SyntaxError: Unexpected keyword 'var', WKJavaScriptExceptionColumnNumber=0, WKJavaScriptExceptionSourceURL=https://m.facebook.com/?refsrc=http%3A%2F%2Fwww.google.com%2F&_rdr, NSLocalizedDescription=A JavaScript exception occurred} ; Zone: ; Task: Promise.then ; Value: Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=5, WKJavaScriptExceptionMessage=SyntaxError: Unexpected keyword 'var', WKJavaScriptExceptionColumnNumber=0, WKJavaScriptExceptionSourceURL=https://m.facebook.com/?refsrc=http%3A%2F%2Fwww.google.com%2F&_rdr, NSLocalizedDescription=A JavaScript exception occurred} undefined

[m-abs]

@kriefsacha

Good to hear that it helped :)

The new problem is probably caused an undocumented behavior...

If you need the result of an executed JavaScript and it is more than one function-call (or declares a var) you need to warp the code as a function with a return value. Something like this:

(function() {
  var x = 0;
  /// DO WORK
  return x;
}();

This is because the code is assigned to a value, so the result can be returned from the webview-layer to the nativescript-layer.

[kriefsacha]

@m-abs

You were missing a parenthesis at the last line to close the function , but yes it works.

Thank you a lot for your help. I will tell you if I have other scripts that are not working.

Thanks !