How i can parse webview content?

Question

I need parse content from webview in my application, is it possible? Now i can get only url page.

I tried search content in LoadFinished object, but i not found

WebView Component:

<template>
    <Page class="webview-page">
        <ScrollView>
            <WebView height="100%" src="https://www.fl.ru/login/"
                @loadFinished="parsePage" />
        </ScrollView>
    </Page>
</template>
<script>
    export default {
        methods: {
            parsePage(webargs) {
                //I need gets content here
                console.log(webargs.url);
            }
        },

        data() {
            return {};
        }
    };
</script>

I expect get all html content from pageview

@Manoj, i haven't webView object in my code, only loadFinished obj.. may have a way how to refer to WebView object? — Sdafs Fasafs, Apr 05 '19 at 11:26
If it's getting reference to `WebView` from `parsePage` method, it will be like `webargs.object`. — Manoj, Apr 05 '19 at 12:47
@Manojm, i tried it, but webargs.object.ios has been empty... — Sdafs Fasafs, Apr 05 '19 at 12:55
You can't trace methods in native object, it will mostly print empty object only. — Manoj, Apr 05 '19 at 13:16
@Manoj, and how i can get webview object?? now i get error: webView.ios.stringByEvaluatingJavaScriptFromString is not a function. (In 'webView.ios.stringByEvaluatingJavaScriptFromString("document.head.innerHTML")', 'webView.ios.stringByEvaluatingJavaScriptFromString' is undefined) cause object ios empty.. — Sdafs Fasafs, Apr 08 '19 at 10:48

score 2 · Accepted Answer · answered Apr 08 '19 at 14:38

Try this,

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <GridLayout>
            <WebView src="https://www.nativescript.org/" @loadFinished="onLoadFinished"
                :visibility="visibility"></WebView>
            <ScrollView v-if="html">
                <Label class="h3" :text="html" textWrap="true"></Label>
            </ScrollView>
        </GridLayout>
    </Page>
</template>

<script>
    import {
        device
    } from "platform";

    export default {
        data() {
            return {
                html: ""
            };
        },
        computed: {
            visibility: function() {
                return this.html ? "hidden" : "visible";
            }
        },
        methods: {
            onLoadFinished: function(args) {
                const that = this,
                    webView = args.object,
                    jsStr = "document.body.innerHTML";

                if (webView.ios) {
                    webView.ios.evaluateJavaScriptCompletionHandler(jsStr,
                        function(
                            result,
                            error
                        ) {
                            if (error) {
                                console.log("error...");
                            } else if (result) {
                                that.html = result;
                            }
                        });
                } else if (webView.android) {
                    // Works only on Android 19 and above
                    webView.android.evaluateJavascript(
                        jsStr,
                        new android.webkit.ValueCallback({
                            onReceiveValue: function(html) {
                                that.html = html;
                            }
                        })
                    );
                }
            }
        }
    };
</script>

If you like support for older Android versions (API level 17 & 18), the implementation gets bit difficult. You will have to implement a @JavascriptInterface interface which can be written only in Java. There is already an issue reported on enabling the ability to access Java Annotation form JavaScript. You may have to write an Android library project where you implement the @JavascriptInterface and utilise it to track content as explained here.

Playground Sample

How i can parse webview content?

1 Answers1