Question

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

我目前正在使用WebView来呈现降价内容，如下所示

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

如预期的那样，使用scrollBar的结果固定为1200像素，但是我真正想做的是渲染具有不同高度且没有scrollBar的整个markdown内容。

有人可以帮忙吗？

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

Answer 1

您可以控制网站吗？如果可以，您可以这样做

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

Answer 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];
    }
}

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

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

2 个答案: