Nativescript-Vue中如何根据内容长度设置WebView的高度？答案

【问题标题】：How to set height of WebView according to the length of content in Nativescript-Vue?Nativescript-Vue中如何根据内容长度设置WebView的高度？
【发布时间】：2019-03-11 14:15:42
【问题描述】：

更新：我使用了 HtmlView，是的，高度随内容变化，但是好像不支持<img />

我目前正在使用 WebView 来呈现如下的 markdown 内容

<WebView :src="marked_content" height="1200px" margin="20dp" />

结果固定在 1200px 与预期的滚动条，但我真正想要做的是渲染整个降价内容具有不同的高度并且没有滚动条。

有人可以帮忙吗？

PS：欢迎任何其他可能呈现降价内容的方法！谢谢！

【问题讨论】：

标签： vue.js webview markdown nativescript

【解决方案1】：

您是否可以控制网站，如果是，您可以这样做

https://discourse.nativescript.org/t/dynamic-webview-height/4215/2?u=manojdcoder

【讨论】：

谢谢@Manoj！这是一个好方法！但遗憾的是，并非所有时间我们都拥有该网站;(
这是最简单的方法，还有其他选项可以在不修改网站的情况下做到这一点，但这需要至少在 Android 上进行一些原生编码，因为 Java 注释还不能编组到 JavaScript。

【解决方案2】：

我已经弄清楚如何在没有插件的情况下做到这一点。上面有一个解决方案，它在 URL 后面附加一个包含页面高度的哈希值。它对我不起作用，因为我直接添加 HTML 代码。例如

src="<p>blah blah</p>"

这是一个简单的 JS 解决方案，因此您必须对其进行重新设计才能使其在 Vue / Typescript 中运行。给你的 WebView 一个 id，不要设置高度，并添加“loaded”和“loadFinished”处理程序。对于加载的处理程序。

platformModule = require("tns-core-modules/platform");
var webViewSrcObj = {};
exports.webViewLoaded = function(webargs){
    if(platformModule.isAndroid){console.log("IS ANDROID!!!"); return false;}
    webview = webargs.object;
    if(webview.height == "auto"){
        webViewSrcObj[webview.id] = webview.src;
        webview.src += '<script>function getPageHeight(){if(document.documentElement.clientHeight>document.body.clientHeight){height = document.documentElement.clientHeight}else{height = document.body.clientHeight}; ph = document.getElementById("pageHeight"); window.location = "pageHeight.html?height="+height;} setTimeout(getPageHeight, 1);</script>';
    }
}

它检查平台，如果是 Android 则返回 false（Android 已经可以正常工作）。然后它检查高度是否设置为“自动”（这是默认值）。如果设置为自动，它将复制 HTML 内容。稍后我将对此进行更多解释。然后它在 html 中附加一些计算视图高度的 JavaScript 代码，然后重定向到一个空页面。它这样做是为了将查询字符串用于页面高度。确保该页面存在于您的应用文件夹中，以避免任何页面未找到错误！

那么对于 onLoadeFinished 处理程序...

exports.webViewLoadFinished = function(webargs){
    if(platformModule.isAndroid){
        console.log("IS ANDROID!!!"); return false;
    }
    webview = webargs.object;
    if(webargs.url.indexOf("?height") > -1){
        height = (webargs.url).split("?height=");
        height = height[1].substr(0, height[1].length)/1;
        webview.height = height; webview.src = webViewSrcObj[webview.id];
    }
}

这将检查查询字符串高度值是否存在。如果是这样，它使用高度值来设置 webview 的高度。最后，它添加在 onLoaded 处理程序中复制的 HTML 内容。即使一个页面中有多个 webview，我的初始测试也能很好地工作。我还没有进行广泛的测试，但是如果您遇到任何问题，增加 setTimeout 时间可能会有所帮助。如果有人能够改进此解决方案，请分享您的结果。

【讨论】：