Nativescript: Accessing public methods of Android WebView

Created on 8 Sep 2017  路  10Comments  路  Source: NativeScript/NativeScript

Tell us about the problem

I am trying to use the public method setWebContentsDebuggingEnabled() of the Android WebView class, but I'm not sure how to access it. I tried

webView.android.setWebContentsDebuggingEnabled(true);

but it doesn't work as I get the following error:

webView.android.setWebContentsDebuggingEnabled is not a function

See below for details.

Which platform(s) does your issue occur on?

Android

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

  • CLI: 3.1.3
  • Cross-platform modules: 3.1.1
  • Runtime(s): tns-android 3.1.1
  • Plugin(s):
    "nativescript-angular": "4.2.0",
    "nativescript-localstorage": "1.1.2"
    "nativescript-theme-core": "1.0.4"
    "nativescript-css-loader": "0.26.1"
    "nativescript-dev-android-snapshot": "0.0.9"
    "nativescript-dev-sass": "1.3.0"
    "nativescript-dev-webpack": "0.6.0"

Note: Project based on the seed angular-seed-advanced

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

Here's the ngAfterViewInit method where I setup the WebView:

    ngAfterViewInit() {
        let webView: WebView = this.webViewRef.nativeElement;

        webView.on(WebView.loadStartedEvent, function() {
            webView.android.getSettings().setBuiltInZoomControls(true);
            webView.android.getSettings().setDisplayZoomControls(false);
            webView.android.setWebContentsDebuggingEnabled(true);
        });

        webView.on(WebView.loadFinishedEvent, function (args: LoadEventData) {
            let message;
            if (!args.error) {
                message = 'WebView finished loading of ' + args.url;
            } else {
                message = 'Error loading ' + args.url + ': ' + args.error;
            }

            console.log('WebView message - ' + message);
        });
    }

If I remove the line with setWebContentsDebuggingEnabled, the webview works.
The two methods calls in getSettings() are working well because they are public methods of the Android WebSettings class, which is not the case of setWebContentsDebuggingEnabled().

Most helpful comment

Thanks @nmongiya for your help. Your code didn't exactly work for me, but it was almost there. I did the following:

android.webkit.WebView['setWebContentsDebuggingEnabled'](true);

The initial code @davidsandoz posted didn't work because the interface doesn't have that property so TS won't compile. Guess I'll be sending a PR to update the interface.

A million thanks!

All 10 comments

I still cannot tell why webView.android.setWebContentsDebuggingEnabled(true); is not working, but I eventually figured out that android.webkit.WebView.setWebContentsDebuggingEnabled(true); does the job.

Thanks for coming back and sharing your solution, as it made me realize that the method I was trying to use (setUserAgentString) is also on WebSettings (not WebView), so adding getSettings() fixed my problem :)

I am trying to use setDomStorageEnabled(true) from Websettings that is available as public https://developer.android.com/reference/android/webkit/WebSettings.html
but when I am trying android.webkit.WebSettings.setDomStorageEnabled(true) it says ERROR TypeError: android.webkit.WebSettings.setDomStorageEnabled is not a function

@nmongiya try webView.android.getSettings().setDomStorageEnabled(true);

@davidsandoz Thanks for you suggestion, it is working now, only problem was that I was using angular and was expecting webView.android.getSettings() to be available in ngAfterViewInit but it was not available. That is available after webview is loaded.

@davidsandoz
android.webkit.WebView.setWebContentsDebuggingEnabled(true); is does not work for me!
open Inspect View is empty....

@cc4dogman instead of android.webkit.WebView.setWebContentsDebuggingEnabled(true);
try webView.android.setWebContentsDebuggingEnabled(true) after the webview is loaded. so try to enable in loaded
<WebView #myWebView id="" [src]="webViewSrc" (loaded)="webViewLoaded($event)"></WebView>

webViewLoaded(args) {
    var webview: WebView = <WebView>args.object;
    if (isAndroid) {
      webview.android.setWebContentsDebuggingEnabled(true);
    }
  }

@nmongiya thanks bros!but webview limit input file,so I used inappbrowser to fix all things,next new app may be continue dev used ns!

Thanks @nmongiya for your help. Your code didn't exactly work for me, but it was almost there. I did the following:

android.webkit.WebView['setWebContentsDebuggingEnabled'](true);

The initial code @davidsandoz posted didn't work because the interface doesn't have that property so TS won't compile. Guess I'll be sending a PR to update the interface.

A million thanks!

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

valentinstoychev picture valentinstoychev  路  3Comments

NickIliev picture NickIliev  路  3Comments

NordlingDev picture NordlingDev  路  3Comments

nirsalon picture nirsalon  路  3Comments

rLoka picture rLoka  路  3Comments