[TIMOB-24616] [Android] Local html not rendered in webview
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Critical |
| Status | Closed |
| Resolution | Cannot Reproduce |
| Resolution Date | 2019-08-01T20:39:14.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | n/a |
| Labels | webView |
| Reporter | Ángel Flores |
| Assignee | Unknown |
| Created | 2017-04-17T10:01:07.000+0000 |
| Updated | 2019-08-01T20:39:14.000+0000 |
Description
I try to open a webview setting html in the webview.html property.
Results:
[Appcelerator Studio]
Empty screen with correct height size.
I have tried android:hardwareAccelerated both true and false (in the Samsung Young 2 the trace is the same)
[Play Store]
It works.
Attachments
| File | Date | Size |
|---|---|---|
| P8-Lite-hardware acceleration disabled.log | 2017-04-17T09:11:19.000+0000 | 7892 |
| P8-Lite-hardware acceleration enabled.log | 2017-04-17T09:11:19.000+0000 | 7894 |
| Samsung Young 2.log | 2017-04-17T09:12:39.000+0000 | 1507 |
| Screenshot_20170421-034515.png | 2017-04-20T21:47:46.000+0000 | 72135 |
| testCode.js | 2017-04-20T13:23:30.000+0000 | 16413 |
Hello, Please share a sample code. Thanks.
Because it is possible that the error depends on the performance of the device, I have prepared a sample text with 20 paragraphs, and each time the window is opened it shows a random number of them (by default the maximum is 5). Opening and closing the screen, it is possible to find the error quickly. For example, a Huawei P8 Lite can show the webview loaded with 2 paragraphs but not with 3.
Hello, I can verify the issue with a little change and got the bellow error in SDK 6.0.3.GA
I use var osname = Ti.Platform.osname; and for OS_ANDROID i used (osname=='android'). See the screenshot. Thanks.Hello, in your case the error is due not to have the folder 'cache'. Sorry, I did not realize that the creation of the folder is performed by my alloy.js neither that the checking about whether the article has an iframe or not is not strictly necessary for this test (I also checked the wrong variable so due to the 'css' block, there was always an iframe) Please, use this new version of the test code.
var args = arguments[0] || {}; var numParagraphs = randomInInterval(5);//max 20 paragraphs var args = { header: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", title: "[BUG] Hmtl not shown", introtext: "Cheking the maximum length of the html for development. Trying to show "+ numParagraphs +" paragraphs", article:["<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra egestas magna, non ornare mi. Mauris condimentum commodo erat sit amet tempus. Duis gravida neque nec semper faucibus. Proin scelerisque mauris sem, eu fringilla ipsum ornare vitae. In at diam dictum, iaculis urna ut, viverra mauris. Quisque ultrices libero ac lacus scelerisque venenatis. Nullam auctor orci ac ex ornare finibus. Proin interdum et arcu et iaculis. Integer viverra viverra eros nec fringilla. Donec id nisi lacinia, hendrerit arcu eu, volutpat eros. Suspendisse vitae aliquam mauris. Praesent aliquet odio quis quam pretium, id mattis odio cursus.</p>" ,"<p>Mauris eleifend libero a ullamcorper volutpat. Mauris dictum, sapien sit amet sodales convallis, sapien nunc condimentum metus, nec dictum neque lorem nec odio. Integer dapibus imperdiet diam, at lobortis lorem rutrum non. Duis leo orci, rhoncus ac dignissim a, elementum et nulla. Sed at efficitur ante. Nunc viverra, tortor sed iaculis pharetra, eros dui faucibus massa, sed pellentesque nisl justo nec nisi. Nullam ipsum ligula, semper vitae scelerisque non, porta in lectus. Curabitur iaculis libero at lectus dignissim mattis ut a urna. Fusce varius leo est, eleifend imperdiet risus dignissim id. Mauris faucibus ultricies libero, at consequat elit vulputate non. Praesent lobortis iaculis metus, et vestibulum massa venenatis a. Nam tempor accumsan lorem et lacinia. Nullam mollis est vitae gravida ultrices.</p>" ,"<p>Sed suscipit, magna id consequat euismod, quam risus luctus ligula, vel condimentum justo diam sed dolor. Integer dictum, tortor non hendrerit ornare, magna arcu cursus nulla, ac hendrerit tortor tellus congue augue. Curabitur vitae maximus ante. Proin sed mattis sapien. Aliquam vitae bibendum lectus. Etiam et urna at lorem semper pretium et nec arcu. Fusce quis imperdiet lacus. Etiam ut velit purus. Nullam cursus eget est eget blandit. Mauris porttitor nisi sit amet diam dictum, ac posuere turpis convallis.</p>" ,"<p>Nullam condimentum eros in mi faucibus, in viverra lorem aliquam. Sed consequat mi lacus, nec iaculis ante ultricies nec. In lacinia augue sit amet leo efficitur posuere. Vestibulum dictum ante non vestibulum eleifend. Sed ut magna consequat, consectetur ipsum id, commodo justo. Maecenas vitae metus et lectus pellentesque sollicitudin ut et nunc. In a augue mauris. Fusce malesuada ante sit amet ipsum tempus, in hendrerit tortor ornare. Vestibulum vel dolor lacinia metus faucibus vestibulum. Ut bibendum, felis ut dapibus tristique, velit sapien accumsan dui, ut interdum leo erat ut orci. Ut nec eleifend purus, sed scelerisque quam. Vestibulum ultrices risus sit amet turpis gravida posuere.</p>" ,"<p>Quisque bibendum magna rhoncus, porttitor sapien ac, imperdiet velit. Integer aliquam lorem ac dolor pharetra tempus. Quisque facilisis, ligula non placerat volutpat, nisi magna ullamcorper justo, id varius dui leo eget massa. Nunc velit risus, dignissim sit amet lectus et, vehicula volutpat libero. Sed pharetra tellus lorem, nec maximus lorem ultrices congue. Aliquam erat volutpat. Integer ornare est quis egestas lacinia. Mauris eleifend tempor fermentum. Mauris a pellentesque augue, vitae aliquam odio. Praesent eget neque vel ante feugiat pretium. In quis est luctus, consectetur nisi et, dapibus quam.</p>" ,"<p>Integer eget purus est. Ut massa metus, dictum a orci in, pellentesque imperdiet sapien. Nam eros nulla, tempor nec elementum non, pretium nec enim. In tincidunt mauris sit amet rutrum ultrices. Nunc vitae justo vel sapien bibendum finibus. Donec non ligula odio. Duis ut convallis nisl, eu lobortis urna. Donec sagittis eleifend euismod. Donec lacinia dignissim elit, sed egestas dolor varius et. Proin bibendum libero neque, in vestibulum libero mattis eu. Sed ornare lacus mauris, a mattis metus convallis ac. Curabitur vestibulum faucibus elit, id aliquet nisi aliquam vel. Integer aliquam tortor est. Donec vehicula, dui at mollis aliquet, arcu urna mollis est, at molestie leo ligula sit amet lacus. Quisque eget blandit lacus, id rutrum sapien.</p>" ,"<p>Aenean in sem sed nisi elementum dictum et quis quam. Aliquam ullamcorper felis at arcu porta ullamcorper. Maecenas vestibulum vehicula ipsum, eget ornare lectus molestie nec. Phasellus ultrices tortor justo, in varius sapien condimentum ut. Donec et est dictum, rhoncus ante quis, scelerisque ante. Nunc vestibulum, orci eu tincidunt elementum, lorem massa iaculis lacus, ut sagittis est dui ut lectus. Phasellus consectetur mi maximus, tincidunt sem eget, dignissim dolor. Donec non nulla velit. Fusce non erat eu nibh ullamcorper sodales.</p>" ,"<p>Duis condimentum nisl ipsum, id bibendum metus eleifend nec. Aenean mattis eget turpis vitae facilisis. Integer pellentesque porttitor elit, ut tincidunt est dapibus accumsan. Donec luctus vitae velit ac porttitor. Duis vulputate augue nec porta luctus. Pellentesque mollis gravida magna. Praesent condimentum, mi eu auctor ullamcorper, arcu leo tempus ipsum, ut scelerisque leo ex vitae dolor. Vestibulum suscipit sit amet purus sed ultrices. Morbi eu ullamcorper lacus. In sed fringilla nibh. Aenean eu neque interdum, pellentesque nibh sit amet, convallis risus. Duis sit amet purus in quam imperdiet varius. Etiam at enim est. Morbi placerat nulla eget interdum rhoncus.</p>" ,"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus porta eleifend. Vivamus imperdiet, magna eget gravida accumsan, felis neque imperdiet est, sed maximus leo mi id enim. Morbi auctor volutpat sem, eget faucibus erat finibus id. Morbi sit amet nisi purus. Aenean placerat felis at ex pharetra, sed congue tellus volutpat. Donec pharetra ut turpis nec varius. Sed pellentesque enim vitae scelerisque viverra. Cras faucibus ante sem, at sagittis neque tempus vitae. Integer dignissim vehicula nulla, et accumsan nulla condimentum a. Donec sem tellus, dignissim ac dapibus sed, ultricies vel nibh. Fusce tempus, nisi quis dapibus luctus, nunc orci pellentesque diam, vitae tempus nulla nisl ac mi.</p>" ,"<p>Cras in velit sit amet ipsum mattis viverra. Pellentesque viverra sapien vitae nibh varius, auctor pulvinar felis cursus. Duis faucibus feugiat orci vitae tincidunt. Nunc eget tellus sodales, condimentum nisi vel, molestie purus. Sed et tincidunt nisl, vel efficitur ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec interdum mattis suscipit.</p>" ,"<p>Mauris ultricies quam ac erat sagittis auctor. Integer laoreet, purus in vehicula tincidunt, metus enim tempus dui, at tristique tellus leo sit amet justo. Integer congue elit arcu, ac hendrerit purus ornare sed. In lobortis ligula ipsum, egestas dapibus nisl malesuada vel. Integer non laoreet dolor. Etiam commodo libero nec auctor lobortis. Vivamus non tincidunt erat. Suspendisse dictum, diam a maximus venenatis, eros ex tincidunt arcu, id mattis ex enim finibus risus. Morbi interdum, est sed elementum fermentum, ligula orci fringilla enim, nec imperdiet tortor augue at dolor. Phasellus feugiat nec purus vitae interdum. Praesent efficitur finibus orci. Ut in lorem vel orci congue pharetra. Sed lectus ligula, aliquam id mi vitae, consequat lacinia tellus. Cras eget dolor enim.</p>" ,"<p>Mauris aliquet congue ipsum, in interdum sapien dapibus eu. Ut et felis sed velit ultrices malesuada. Suspendisse eget lobortis sem, non aliquam libero. Nulla porttitor mattis dui, vel commodo justo eleifend et. Donec neque leo, vulputate in fringilla vel, sagittis imperdiet metus. In hac habitasse platea dictumst. Proin vel enim volutpat, gravida lacus at, tincidunt felis. Quisque mollis, nisi at hendrerit blandit, justo nisl tristique purus, ac pellentesque leo quam eget lacus. Praesent vel quam eget velit dapibus fermentum eu in nulla. Donec purus tellus, lacinia vel rhoncus id, consequat sit amet mauris. Aenean hendrerit nunc orci. Phasellus nec maximus leo, in tincidunt orci. Nulla consequat elit eu consectetur dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>" ,"<p>Quisque consectetur quis justo nec tempor. Pellentesque egestas augue lorem, eu egestas augue sagittis vel. Phasellus tellus nisl, fermentum et mattis ut, tincidunt quis quam. Curabitur leo ante, ornare at tincidunt eget, ultrices vehicula nisl. Ut felis diam, tincidunt vel nisi ac, hendrerit viverra sem. Curabitur nec dolor at leo viverra lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>" ,"<p>Etiam scelerisque vel diam quis tempor. Aliquam placerat porttitor ligula, at pretium nisi maximus id. Praesent ornare vitae eros ac elementum. Pellentesque at lobortis sapien, non semper augue. Aenean lectus sem, rutrum eu auctor eget, ullamcorper ut lorem. Curabitur ornare tristique tellus, eget eleifend elit maximus nec. Integer at ante urna. Nunc justo lectus, faucibus vitae ultricies eget, vulputate non nisi. Nullam ultrices felis et sem varius, non pellentesque sem laoreet. Etiam cursus venenatis iaculis. Nulla maximus commodo lectus vitae aliquam. Maecenas placerat viverra vehicula. Mauris vel imperdiet nibh. Aliquam id nisi varius, porta ipsum ut, luctus purus. Maecenas sagittis ipsum sed sem bibendum, in ultrices eros rhoncus.</p>" ,"<p>Maecenas felis ex, commodo eget dolor in, gravida posuere odio. Donec nec posuere massa, sit amet feugiat neque. Mauris neque magna, convallis eget tortor vitae, pharetra condimentum libero. Nunc hendrerit porttitor euismod. Nunc luctus accumsan aliquam. Nullam tellus augue, ullamcorper nec pulvinar sit amet, iaculis sit amet tellus. Mauris nec turpis ullamcorper, faucibus metus nec, elementum massa. Mauris tristique mattis turpis, id semper sem cursus at. Pellentesque commodo dictum sodales. Suspendisse vitae elit ut massa lacinia commodo. Praesent risus diam, suscipit a diam sed, venenatis fermentum leo.</p>" ,"<p>Ut malesuada, ex quis fermentum bibendum, turpis dui convallis metus, nec ultrices nisl lacus auctor eros. Nullam ipsum mi, consequat quis tincidunt sit amet, placerat eu lacus. In placerat ligula sed massa feugiat cursus. Donec vel ultricies arcu. Fusce scelerisque malesuada arcu, varius ultricies sem ultrices non. Praesent sodales metus id tincidunt vulputate. Proin lobortis enim vel tortor eleifend, maximus consectetur erat cursus. Vestibulum aliquam, nibh nec scelerisque maximus, nisi sem ornare est, venenatis viverra ipsum mauris ut ligula.</p>" ,"<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed vel lacus nunc. Vivamus at dignissim massa, non accumsan justo. Nullam at lorem pellentesque, venenatis mi ac, aliquam ante. Fusce sit amet ultricies sem. Praesent sed purus at leo consequat vestibulum at sed sapien. Nulla sit amet magna eget augue lobortis pulvinar pulvinar sed dolor.</p>" ,"<p>Sed interdum, orci vitae tempor gravida, elit nunc fermentum est, sit amet elementum purus risus in lacus. Vivamus accumsan tincidunt mi non molestie. Sed volutpat est non lectus sagittis finibus. Curabitur ullamcorper et urna in consectetur. Sed dictum ligula vel sapien ornare, sit amet placerat dolor mattis. Sed dolor eros, egestas a augue finibus, euismod iaculis est. Sed consequat lorem id enim condimentum, in efficitur leo blandit. Pellentesque nec ligula eleifend, rutrum libero at, mollis est. In dictum ultrices fringilla. Duis consequat felis vitae elit cursus ornare. Nulla congue ex vel orci sagittis dictum.</p>" ,"<p>Praesent ac neque neque. Maecenas viverra velit non ligula placerat imperdiet. In placerat vitae sapien vitae sagittis. Donec nisi justo, iaculis vitae dapibus suscipit, tristique id enim. Nulla at mi purus. Curabitur sed lorem ante. Ut in enim in mauris aliquam egestas pretium quis nunc. Etiam posuere id elit sit amet imperdiet. Maecenas pellentesque lorem nec dapibus consequat. Suspendisse dapibus orci elit, non convallis ante cursus sit amet. Maecenas nec ante in nunc efficitur consectetur ut et ex.</p>" ,"<p>Quisque et mi nec tellus convallis accumsan. Proin quis finibus magna. Proin non enim dolor. Vivamus lorem dui, euismod et ante non, luctus condimentum tellus. Etiam lobortis felis venenatis scelerisque elementum. Aenean at suscipit elit, ac pharetra enim. Maecenas ultricies congue dui a rhoncus. Nulla sapien arcu, pulvinar sit amet mollis ac, semper in odio. Etiam blandit imperdiet enim eget imperdiet. Donec ut ex eu nibh fermentum elementum. Sed varius elementum iaculis. Phasellus interdum finibus orci, id vulputate lacus condimentum ut. Nam vel nunc tristique dolor elementum blandit et ac nunc. Donec blandit leo non turpis lobortis gravida.</p>" ] }; var articleContent = args.article.splice(0, numParagraphs).join(''); var htmlDocument = "<!DOCTYPE html>"+ "<html>"+ " <head>"+ " <meta charset='utf-8' />" + " <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />"+ " <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0'/>"+ " </head>"+ " <body>"+ " <style type='text/css'>"+ " html {}"+ " iframe{max-width: 95% !important;}"+ " table {max-width: 100% !important;}"+ " table td{max-width: 100% !important; vertical-align:top !important;}"+ " blockquote{padding-left:0 !important;}"+ " #introtext{}"+ " *{font-size:14px;font-family:verdana;}"+ " #fulltext{text-align: justify;}"+ " img {max-width: 100%; height: auto;}"+ " </style>"+ articleContent + " </body>"+ "</html>"; var page = Ti.UI.createScrollView({id:"pageView", layout:"vertical", scrollType:"vertical", disableBounce:true, width:Ti.UI.FILL, height:Ti.UI.SIZE, contentWidth:Ti.UI.SIZE, contentHeight:Ti.UI.SIZE, backgroundColor:"white"}); var headerImage = Ti.UI.createImageView({id:"headerImage", top:0, width:"100%", image: args.header}); var bottomView = Ti.UI.createView({id:"bottomView", layout:"horizontal", backgroundColor: "#d3d3d3"}); var articleView = Ti.UI.createView({id:"articleView", layout:"vertical", width: "100%"}); var title = Ti.UI.createLabel({id:'title', color:"black", text: args.title, top: 8, left: 8, textAlign: "left", font: {fontWeight: 'bold', fontSize: 16}}); var introtext = Ti.UI.createLabel({id:'introtext',color:"black", text: args.introtext, top: 8, left: 8, textAlign: "left", font: {fontSize: 16}}); var content = Ti.UI.createWebView({id:"content", top:8, html:htmlDocument, enableZoomControls:false, disableBounce:true, width:Ti.UI.FILL, height:Ti.UI.SIZE, contentWidth:Ti.UI.SIZE, contentHeight:Ti.UI.SIZE}); if(OS_ANDROID) content.softKeyboardOnFocus = Titanium.UI.Android.SOFT_KEYBOARD_HIDE_ON_FOCUS; articleView.add(title); articleView.add(introtext); articleView.add(content); bottomView.add(articleView); page.add(headerImage); page.add(bottomView); var win = Ti.UI.createWindow(); win.add(page); win.open(); /*********************************************** * FUNCTIONS ***********************************************/ function randomInInterval(limit) { return Math.floor(Math.random() * (limit+1))+1; } //Calculate the height of the document to avoid problems with the scroll bottomView.addEventListener('load', function(e) { if (OS_IOS) var myHeight = content.evalJS("document.documentElement.scrollHeight"); else var myHeight = content.evalJS("document.height"); if(isNaN(myHeight))//In Android 5.0+ (or Huawei Y635-L01 4.4.4 evalJS of the document height returns NaN and it's not necesary { page.scrollTo(0, 0); return; } var tmp = Math.ceil(myHeight); if(OS_ANDROID) content.height = tmp; else articleView.height = tmp+20; bottomView.height = (title && title.rect ? title.rect.height : 0) + (introtext && introtext.rect? introtext.rect.height : 0) + tmp + 15; page.scrollTo(0, 0); });