我如何解析 webview 内容？答案

【问题标题】：How i can parse webview content?我如何解析 webview 内容？
【发布时间】：2019-04-05 09:46:36
【问题描述】：

我需要在我的应用程序中解析来自 webview 的内容，可能吗？现在我只能获取 url 页面。

我尝试在 LoadFinished 对象中搜索内容，但没有找到

WebView 组件：

<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>

我希望从页面浏览中获取所有 html 内容

【问题讨论】：

@Manoj，我的代码中没有 webView 对象，只有 loadFinished obj.. 可能有办法如何引用 WebView 对象？
如果它从parsePage 方法中获得对WebView 的引用，它将类似于webargs.object。
@Manojm，我试过了，但是 webargs.object.ios 已经为空了...
你不能在原生对象中追踪方法，它只会打印空对象。
@Manoj，我怎样才能得到 webview 对象？现在我得到错误：webView.ios.stringByEvaluatingJavaScriptFromString 不是一个函数。（在 'webView.ios.stringByEvaluatingJavaScriptFromString("document.head.innerHTML")' 中，'webView.ios.stringByEvaluatingJavaScriptFromString' 未定义）导致对象 ios 为空..

标签： nativescript nativescript-vue

【解决方案1】：

试试这个，

<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>

如果您希望支持较旧的 Android 版本（API 级别 17 和 18），则实施会有些困难。您必须实现一个只能用 Java 编写的 @JavascriptInterface 接口。已经报告了启用访问Java Annotation form JavaScript 的能力的问题。您可能需要编写一个 Android 库项目，在其中实现 @JavascriptInterface 并按照 here 的说明使用它来跟踪内容。

Playground Sample

【讨论】：