Unsolved Webview (QT5.12.4, QT5.15.2) shows "Uncaught TypeError: Cannot set property 'src' of null..." in Android API 29+, but API28 works.
-
Due to Android Refusing to load URL as it exceeds 2097152 characters, here use three steps to show image by using image-base64 data.
Error happens and webview does not display content in API 29+, but all works in API 28Step 1:
let xhr = new XMLHttpRequest; xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { webView.notEmptyPage = true; webView.loadHtml( xhr.responseText); } }; xhr.open('GET', "/imageTemplate.html"); xhr.send();
Note: imageTemplate.html is one file with html and CSS style file:
<!DOCTYPE html> <html> <head> <style> /////////// </style> </head> <body> <div id="myModal" class="modal"> <img class="modal-content" src="" id="img01"> </div> </body> </html>
Step 2:
WebView{ id: webView onLoadingChanged:{ if (loadRequest.status === 2){ let js = "var img = document.getElementById('img01');" js += "var modaldocument.getElementById('myModal');" js += "img.src = '" + image64baseData + "';" js += "modal.style.display = \"block\";" webView.runJavaScript(js, function(result){console.log(result);}) // Exception happens } } }
Error happens and webview display empty in API 29+, but all works in API 28
I chromium: [INFO:CONSOLE(1)] "Uncaught TypeError: Cannot set property 'src' of null", source: data:text/html;charset=UTF-8,<!DOCTYPE html>%0A<html>%0A%0A<head>%0A <style>%0A body {%0A .....
-
This issue could be fixed by remove the style part from the template html in API29, even the file is correct and validated.
So guess there are webview exceptions happen in API29, webview dose not ignore own-identified exception and does not display content.
Another QML testing in QT 5.15.2:
QString htmlStr = "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">\n<html><head><meta name="qrichtext" content="1" /><style type="text/css">\np, li { white-space: pre-wrap; }\n</style></head><body style=" font-family:'.AppleSystemUIFont'; font-size:13pt; font-weight:400; font-style:normal;">\n<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"> <span style=" color:#110d62;"> </span><span style=" font-weight:600; color:#110d62;">Welcome to set Android TargetSdkVersion as 29</span></p>\n<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br /></p>\n<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">This is webview testing when set targetSdkVersion in QT. When set TargetSdkVersion as 29, if webview load content str has Qt-specific CSS properties like this, webview content display empty. Method is using webViewId.loadHtml(contentStr);</p></body></html>"
webview.loadHtml(htmlStr);
set Android target at API28 works, API29 and API30, webview does not show anything.
Is this QT bug/issue?