如何使用 WebView、Nativescript 在 iOS 中动态设置高度？答案

【问题标题】：How can I make a height dynamic in iOS with WebView, Nativescript?如何使用 WebView、Nativescript 在 iOS 中动态设置高度？
【发布时间】：2019-09-20 16:46:25
【问题描述】：

我遇到的问题是 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>

【问题讨论】：

itinerario.mEstructura - 是您资产的本地网页还是远程网页？一种更简单的解决方案是（如果您可以控制网页），编写一个 JS 函数来计算高度并在您可以从 app 读取的位置哈希中更新它。如果您无法控制网页，那么您可能需要编写一些本机代码来获取网页加载后的高度。
我无法控制页面，这就是他们将其设为动态并添加 X 内容的问题。我怎么能用本机代码做到这一点？

标签： ios angular nativescript

【解决方案1】：

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

HTML

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

 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();
                }
            })
        );
    }
}

Playground Sample

【讨论】：

【解决方案2】：

我为 nativescript-vue 改编了 @manoj 的答案。

<template>
   <ScrollView>
     <StackLayout>
       <WebView
         src="https://www.nativescript.org/"
         @loadFinished="loadFinished"
         :ios:height="iosHeight"
       />
     </StackLayout>
   </ScrollView>
</template>

<script>
export default {
  methods: {
    loadFinished(args) {
      if (!global.isIOS) {
        return;
      }
      const webview = args.object;
      const jsStr = `let body = document.body;
        let html = document.documentElement;
        Math.max(body.scrollHeight, body.offsetHeight,
          html.clientHeight, html.scrollHeight, html.offsetHeight);`;
      webview.ios.scrollView.scrollEnabled = false;
      webview.ios.evaluateJavaScriptCompletionHandler(
        jsStr,
        (result, error) => {
          if (result) {
            this.iosHeight = result;
          }
        }
      );
    },
  },
};
</script>

【讨论】：