0

Я хочу добавить веб-просмотр, высота которого будет такой же, как и контент. Я делаю это плавно на Android, но на iOS, чем дольше текст, тем длиннее пространство ниже текста.Web-обзор autoheight для контента не работает на iOS (Appcelerator Titanium)

Вот мой код:

var window = Ti.UI.createWindow(); 

var scrollView = Ti.UI.createScrollView({ 
    layout: 'vertical', 
    height: Ti.UI.SIZE 
}); 

    var view1 = Ti.UI.createView({ 
     height: 200, 
     backgroundColor: 'red' 
    }); 

    var webview = Ti.UI.createWebView({ 
     height: Ti.UI.SIZE,  
     html: '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"></head><body style="margin:0; background-color: blue">Some page some text2</body></html>' 
    }); 

    var view2 = Ti.UI.createView({ 
     height: 200, 
     backgroundColor: 'green' 
    }); 

    scrollView.add(view1); 
    scrollView.add(webview); 
    scrollView.add(view2); 

    window.add(scrollView); 

window.open(); 

Спасибо заранее.

ответ

2

Веб-просмотр не знает размер контента. Но вы можете ЗАПРОСИТЬ веб-просмотр, насколько высок контент.

Для этого вам необходимо использовать evalJS.

Используйте JS найти на StackOverflow:

var body = document.body, 
    html = document.documentElement; 

var height = Math.max(body.scrollHeight, body.offsetHeight, 
         html.clientHeight, html.scrollHeight, html.offsetHeight); 

и предпочтительно поместить это в функции внутри WebView. Допустим, указанный выше Javascript находится в функции getDocumentHeight, и эта функция возвращает свойство height. Теперь, чтобы получить использование высоты Eval, как это:

var height = webview.evalJS('getDocumentHeight()'); 
webview.height = height; 

Теперь вы хотите, чтобы это выполнить каждый раз, когда содержимое загружается, предполагая, что изменения содержания, поэтому в этом случае вы можете смотреть load событие (doc here) и запускать evalJS при каждом запуске этого события.

Это не будет очень красиво, так как веб-просмотр не предназначен для масштабирования, как это, но он работает.

+1

Согласитесь, это не очень, но единственный способ я нашел, чтобы заставить его работать. И я пробовал уже много лет! –

+0

Этот метод дает ту же высоту, что и Ti.UI.SIZE. Например, текст: «Некоторая страница some text2 Some page some text2 Some page some text2» вернет высоту: 240 (где на Android это 38, и это правильное значение), поэтому есть еще пробел ниже. Попробуйте код. – kreatywny

+0

Странная вещь, что высота не увеличивается как функция линии. Например: если на iOS 240, то реальная высота равна 38 (~ 6.31x), если она равна 7060, а действительная высота равна 931 (~ 7.58x). Значение одинаково для всех устройств iOS (iPhone 5/6, iPad Pro), и это также удивительно (разрыв на Iphone 5 меньше, чем на iPad Pro). – kreatywny