Как установить высоту WebView в соответствии с длиной содержимого в Nativescript-Vue? - PullRequest
0 голосов
/ 06 октября 2018

Обновление: я использовал HtmlView и да, высота динамическая с содержимым, но, похоже, не поддерживается <img />

В настоящее время я использую WebView для визуализации уценкисодержимое, как показано ниже

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

Результат зафиксирован на 1200 пикселей с scrollBar, как и ожидалось, но на самом деле я хочу визуализировать весь контент уценки с различной высотой и без scrollBar.

Кто-нибудь может помочь, пожалуйста?

PS: Любые другие методы, которые могут отображать уценку, приветствуются!Спасибо!

Ответы [ 2 ]

0 голосов
/ 15 апреля 2019

Я разработал, как это сделать без плагинов.Выше есть решение, которое добавляет URL с хешем, содержащим высоту страницы.Это не сработало для меня, потому что я добавляю HTML-код напрямую.Например,

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

Это простое решение JS, поэтому вам придется переделать его, чтобы оно работало в Vue / Typescript.Присвойте своему WebView идентификатор, не устанавливайте высоту и добавьте обработчики «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>';
    }
}

Он проверяет платформу и возвращает false, если это Android (Android уже работает нормально).Затем он проверяет, установлена ​​ли высота на «авто» (по умолчанию).если установлено значение auto, будет скопировано содержимое 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];
    }
}

Это проверит, чтобы увидеть, соответствует ли высота строки запросазначение существует.Если это так, он использует значение высоты, чтобы установить высоту веб-просмотра.И, наконец, он добавляет контент HTML, который был скопирован в обработчик onLoaded.Мое первоначальное тестирование хорошо работает даже с несколькими веб-просмотрами на странице.Я не проводил подробного тестирования, но это может помочь увеличить время setTimeout, если у вас возникнут какие-либо проблемы.Если кто-то может улучшить это решение, поделитесь своими результатами.

0 голосов
/ 06 октября 2018

У вас есть контроль над сайтом, если да, вы можете сделать это

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...