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

Posted 2023-02-22

【中文标题】Nativescript-Vue中如何根据内容长度设置WebView的高度？

【英文标题】：How to set height of WebView according to the length of content in Nativescript-Vue?

【发布时间】：2019-03-11 14:15:42

【问题描述】：

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

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

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

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

有人可以帮忙吗？

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

【参考方案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.clientHeightelseheight = document.body.clientHeight; ph = document.getElementById("pageHeight"); window.location = "pageHeight.html?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 时间可能会有所帮助。 如果有人能够改进此解决方案，请分享您的结果。