ความสูงอัตโนมัติของ Webview กับเนื้อหาไม่ทำงานบน iOS (Appcelerator Titanium)

ฉันต้องการเพิ่ม webview ซึ่งความสูงจะเป็นตามเนื้อหา ฉันทำให้มันทำงานได้อย่างราบรื่นบน Android แต่บน iOS ยิ่งข้อความยาว พื้นที่ด้านล่างข้อความก็จะยิ่งยาวขึ้น

นี่คือรหัสของฉัน:

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

ขอบคุณล่วงหน้า.


webview appcelerator titanium titanium-mobile appcelerator-mobile
person kreatywny    schedule 25.07.2016    source แหล่งที่มา

คำตอบ (2)


arrow_upward
2
arrow_downward

WebView ไม่ทราบขนาดของเนื้อหา แต่คุณสามารถถาม webview ได้ว่าเนื้อหาสูงแค่ไหน

สำหรับสิ่งนี้ คุณต้องใช้ 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 ด้านบนทุกครั้งที่เหตุการณ์นี้เริ่มทำงาน

มันจะไม่สวยงามมากนัก เนื่องจาก webview ไม่ได้ตั้งใจที่จะปรับขนาดเช่นนี้ แต่ใช้งานได้

person Rene Pot    schedule 26.07.2016
comment
ยอมรับว่านี่ไม่สวย แต่เป็นวิธีเดียวที่ฉันพบว่ามันใช้งานได้ และฉันพยายามมาหลายปีแล้ว! - person Jeff Bonnes; 26.07.2016
comment
เมธอดนี้ให้ความสูงเท่ากับ Ti.UI.SIZE ตัวอย่างเช่น ข้อความ: 'บางหน้า บาง text2 บางหน้า บาง text2 บางหน้า บาง text2' จะส่งคืนค่าความสูง: 240 (โดยที่บน Android คือ 38 และนั่นเป็นค่าที่เหมาะสม) จึงยังคงมีช่องว่างด้านล่าง โปรดลองรหัส - person kreatywny; 27.07.2016
comment
สิ่งที่แปลกคือความสูงไม่เพิ่มขึ้นตามฟังก์ชันเส้น ตัวอย่างเช่น หากบน iOS คือ 240 ส่วนสูงจริงคือ 38 (~6.31x) หากเป็น 7060 ส่วนสูงจริงคือ 931 (~7.58x) ค่าจะเหมือนกันสำหรับอุปกรณ์ iOS ทั้งหมด (iPhone 5/6, iPad Pro) และยังน่าแปลกใจอีกด้วย (ช่องว่างบน Iphone 5 นั้นเล็กกว่าบน iPad Pro) - person kreatywny; 27.07.2016
comment
ดูเหมือนว่าบน iOS ความสูงที่ส่งคืนนั้นเชื่อมโยงกับจำนวนอักขระ หากบน Android เรามีข้อความ 4 บรรทัด (สูง: 76) มากกว่าบน iOS (ขึ้นอยู่กับจำนวนอักขระ) เราจะมีค่าเช่น: 560, 640, 720, 800 แต่สำหรับข้อความ 5 บรรทัด (สูง: 96 บน Android ) เราจะเริ่มต้นด้วย ~880 บน iOS - person kreatywny; 27.07.2016

arrow_upward
0
arrow_downward

ดูเหมือนว่าจะเป็นข้อผิดพลาด / วิธีการท้อแท้สำหรับ iOS ไม่มีวิธีแก้ปัญหาโดยตรง สามารถตรวจสอบได้ที่นี่: Jira Ticket เกี่ยวกับปัญหากับ iOS 9, Jira Ticket เกี่ยวกับปัญหากับ webView + ScrollView

person kreatywny    schedule 27.07.2016