作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我遇到的问题是,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>
最佳答案
使用原生方法来评估可以返回文档高度的 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>
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();
}
})
);
}
}
关于ios - 如何在 iOS 中使用 WebView、Nativescript 使高度动态化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58032338/
我是一名优秀的程序员,十分优秀!