Tinggi otomatis tampilan web ke konten tidak berfungsi di iOS (Appcelerator Titanium)

Saya ingin menambahkan tampilan web yang tingginya sesuai konten. Saya membuatnya berjalan lancar di Android tetapi di iOS, semakin panjang teksnya, semakin panjang ruang di bawah teksnya.

Ini kode saya:

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();

Terima kasih sebelumnya.


webview appcelerator titanium titanium-mobile appcelerator-mobile
person kreatywny    schedule 25.07.2016    source sumber

Jawaban (2)


arrow_upward
2
arrow_downward

Tampilan web tidak mengetahui ukuran konten. Tapi Anda bisa BERTANYA pada tampilan web seberapa tinggi kontennya.

Untuk ini, Anda perlu menggunakan evalJS.

Gunakan JS yang ditemukan di StackOverflow:

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

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

dan sebaiknya letakkan ini dalam fungsi di dalam tampilan web. Katakanlah Javascript di atas ada dalam fungsi getDocumentHeight dan fungsi tersebut mengembalikan properti height. Sekarang, untuk mendapatkan ketinggian gunakan eval seperti ini:

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

Sekarang, Anda ingin ini dijalankan setiap kali konten dimuat, dengan asumsi konten berubah, sehingga dalam hal ini Anda dapat menonton acara load (doc di sini) dan picu evalJS di atas setiap kali peristiwa ini diaktifkan.

Ini tidak akan terlalu bagus, karena tampilan web tidak dimaksudkan untuk berskala seperti ini, tetapi berhasil.

person Rene Pot    schedule 26.07.2016
comment
Setuju, ini tidak bagus, tetapi satu-satunya cara yang saya temukan untuk membuatnya berhasil. Dan saya sudah mencobanya selama bertahun-tahun! - person Jeff Bonnes; 26.07.2016
comment
Metode ini memberikan ketinggian yang sama dengan Ti.UI.SIZE. Misalnya teks: 'Beberapa halaman beberapa teks2 Beberapa halaman beberapa teks2 Beberapa halaman beberapa teks2' akan mengembalikan tinggi: 240 (di Android adalah 38 dan itu nilai yang sesuai) sehingga masih ada celah di bawah. Silakan coba kodenya. - person kreatywny; 27.07.2016
comment
Yang aneh adalah ketinggiannya tidak bertambah seiring fungsi garis. Misalnya: jika di iOS 240 maka tinggi sebenarnya adalah 38 (~6,31x), jika 7060 maka tinggi sebenarnya adalah 931 (~7,58x). Nilainya sama untuk semua perangkat iOS (iPhone 5/6, iPad Pro) dan juga mengejutkan (celah pada Iphone 5 lebih kecil dibandingkan pada iPad Pro). - person kreatywny; 27.07.2016
comment
Tampaknya di iOS, ketinggian yang dikembalikan terkait dengan jumlah karakter. Jika di Android kita memiliki 4 baris teks (tinggi: 76), maka di iOS (tergantung jumlah karakter) kita akan memiliki nilai seperti: 560, 640, 720, 800. Namun untuk 5 baris teks (tinggi: 96 di Android ) kita akan mulai dengan ~880 di iOS. - person kreatywny; 27.07.2016

arrow_upward
0
arrow_downward

Tampaknya ini adalah metode bug/tidak disarankan untuk iOS. Tidak ada solusi langsung. Dapat diperiksa di sini: Tiket Jira tentang masalah dengan iOS 9, Tiket Jira tentang masalah dengan webView + ScrollView

person kreatywny    schedule 27.07.2016