如何在 iOS 中使用 WebView、Nativescript 使高度动态化？

Question

我遇到的问题是，WebView 不会在 iOS 中动态加载高度（如果在 Android 中加载），问题是我的内容是动态的并且可以变高，并且放置固定高度对我来说不起作用。你可以帮帮我吗？

<CardView *ngFor="let itinerario of itinerario" class="card" elevation="40" radius="10" ios:shadowRadius="3">
   <StackLayout class="card-layout text-center">
      <WebView [src]="itinerario.mEstructura" height="auto"></WebView>
   </StackLayout>
</CardView>

Answer 1

使用本机方法来评估可以返回文档高度的 JavaScript。

超文本标记语言

<GridLayout>
    <ScrollView class="page">
        <StackLayout>
            <WebView src="https://www.nativescript.org/" [height]="height"
                (loadFinished)="onWebViewLoadFinished($event)"></WebView>
            <Button class="btn btn-primary" text="Hello!"></Button>
        </StackLayout>
    </ScrollView>
</GridLayout>

TS

 onWebViewLoadFinished(event: EventData) {
    const webView = <WebView>event.object,
        jsStr = `var body = document.body;
        var html = document.documentElement;
        Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight);`;

    if (webView.ios) {
        webView.ios.scrollView.scrollEnabled = false;
        webView.ios.evaluateJavaScriptCompletionHandler(jsStr,
            (
                result,
                error
            ) => {
                if (error) {
                    console.log("error...");
                } else if (result) {
                    this.height = layout.toDeviceIndependentPixels(result);
                    this.changeDetectorRef.detectChanges();
                }
            });
    } else if (webView.android) {
        // Works only on Android 19 and above
        webView.android.evaluateJavascript(
            jsStr,
            new android.webkit.ValueCallback({
                onReceiveValue: (height) => {
                    this.height = layout.toDeviceIndependentPixels(height);
                    this.changeDetectorRef.detectChanges();
                }
            })
        );
    }
}

游乐场样本