I am developing an application in which webview downloads html data that comes as a string from the server. In fact, showing that the html line in the webview is working fine, but takes a long time if there are any images in this data. I think a lazy bootloader would be good in this case.
For this lazy loading, we use the jquery functions in the html string. When I tried to run this, it gave me below security exception
I / chromium (4434): [INFO: CONSOLE (3)] "Uncaught SecurityError: failed to execute 'replaceState' in 'History': the history state object with the URL 'about: / blank' cannot be created in the document with the source" null "., source: https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js (3)
But when I tried to run from local assets, everything worked fine.
Below the line is the html data that I am trying to upload to webview.
<html lang=\ "hi\">\r\n
<head>\r\n
<meta http-equiv=\ "Content-Language\" content=\ "hi\">\r\n
<meta http-equiv=\ "Content-Type\" content=\ "text/html; charset=UTF-8\">\r\n
<meta name=\ "viewport\" content=\ "width=device-width, initial-scale=1\">\r\n
<script type=\ "text/javascript\" src=\ "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js\"></script>\r\n
<script type=\ "text/javascript\" src=\ "https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js\"></script>\r\n
<script type=\ "text/javascript\" src=\ "https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js\"></script>\r\n
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&v1' rel='stylesheet' type='text/css'>\r\n</head>\r\n
<style>
\r\nhtml,
body,
div {
\r\n\tmargin: 0;
\r\n\tpadding: 0;
\r\n
}
\r\nimg {
\r\n width: 45.22%;
\r\n height: 89%;
\r\n vertical-align: top;
\r\n \tmargin-top: 3.1%;
\r\n \tmargin-bottom: 3.1%;
\r\n margin-left: 3.1%;
\r\n margin-right: 1%;
\r\n
}
\r\n.content {
\r\n\theight: 100%;
\r\n\twidth: 100%;
\r\n\toverflow: auto;
\r\n\tposition: relative;
\r\n\tbackground-size: 100% 100%;
\r\n\tbackground-repeat: no-repeat;
\r\n
}
\r\nbutton {
\r\n\t width: 35%;
\r\n\t padding: 1px;
\r\n\t vertical-align: middle;
\r\n\t float: middle;
\r\n\t border: none;
background: none;
\r\n
}
\r\n#div2 {
\r\n width: 88%;
\r\n height: 70%;
\r\n margin-top: 7%;
\r\n overflow: hidden;
\r\n text-overflow: ellipsis;
\r\n
}
\r\n#div3 {
\r\n width: 91%;
\r\n height: 52%;
\r\n margin-left: 4%;
\r\n overflow: hidden;
\r\n text-overflow: ellipsis;
\r\n
}
\r\n#btn {
\r\n\twidth: 20%;
\r\n\theight: 6%;
\r\n\tvertical-align: middle;
\r\n
}
\r\n#btn1 {
\r\n\twidth: 30%;
\r\n\theight: 6%;
\r\n\tvertical-align: middle;
\r\n
}
\r\n#btn2 {
\r\n\twidth: 37%;
\r\n\theight: 6%;
\r\n\tvertical-align: middle;
\r\n
}
\r\n#botrigh {
\r\n width: 50%;
\r\n\tposition: absolute;
\r\n bottom: 5%;
\r\n right: 1%;
\r\n
}
\r\n#botrighimg {
\r\n width: 50%;
\r\n\tposition: absolute;
\r\n bottom: 7%;
\r\n right: 1%;
\r\n
}
\r\n.heading {
\r\n font-family: \"Open Sans Condensed Light\" ;\r\n}\r\n.cardcontent{\r\n font-family:\"Open Sans Condensed Light\" ;\r\n}\r\n
</style>\r\n
<body onload=\ "resize()\" style=\ "-webkit-transform: translate3d(0,0,0);\">
\r\n
<div id=\ "deckid\" class=\ "content\" style=\ "background-image: url('file:///android_asset/feed_card_6.png');\">\r\n
<div id=\ "deckid\" class=\ "deckid\"></div>
<div id=\ "cardid\" class=\ "cardid\"></div>\r\n<img class=\ "lazy\" data-original=\ "file:///android_asset/polio.jpg\"/>\r\n
<div style=\ "display:inline-block;width:48%;margin-right:1%\">\r\n
<div class=\ "openFullcard\">\r\n
<div id=\ "div2\"><font size=\ "3%\" style=\ "color:#F993CD;\"><span class=\"heading\">Web Card Title</span></font>
</br><font size=\ "2%\"><span class=\"cardcontent\"> polio or infantile paralysis, is an infectious disease caused by the poliovirus. </span></font>
</br><font size=\ "1\" color=\ "grey\">See more..</font>\r\n</div>\r\n</div>\r\n</br>\r\n
<div id=\ "botrigh\">
\r\n
<button id=\ "likeone\" class=\ "likebtn\" align:\ "middle\" style=\ "width:35%; border-right:thin solid grey;\">\r\n<img id=\ "btn\" src=\ "file:///android_asset/like_icon.png\" alt=\ "Text\" />\r\n<font size=\ "1%\" color=\ "grey\">like 05</font>\r\n</button>\r\n
<button id=\ "shareone\" class=\ "sharebtn\" style=\ "width:30%; margin-left:-2%; border-right:thin solid grey;\">\r\n<img id=\ "btn1\" src=\ "file:///android_asset/share_icon.png\" alt=\ "Text\" />\r\n<font size=\ "1%\" color=\ "grey\">share</font>\r\n</button>\r\n
<button id=\ "saveone\" class=\ "savebtn\" style=\ "width:27%; margin-left:-2%;\">\r\n<img id=\ "btn2\" src=\ "file:///android_asset/save_icon.png\" alt=\ "Text\" />\r\n<font size=\ "1%\" color=\ "grey\">save</font>\r\n</button>
</div>\r\n</div>\r\n
<div align=\ "center\" style=\ " opacity: 0.75; padding-top:1%; width:31%; background-color:grey; position:absolute; bottom:6%; left:2%;\">\r\n<font size=\ "1%\" color=\ "white\" style=\ "margin-left:4%;\">About 5min ago</font>\r\n</div>\r\n</div>
<div id=\ "addcards\"></div>\r\n</body>\r\n\r\n
<script>
\
r\ n$.mobile.loading().hide();\
r\ n$(function() {\
r\ n $(\"img.lazy\").lazyload({\r\n \tthreshold : 50\r\n });\r\n});\r\nfunction resize(){\r\n\r\nvar w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);\r\nvar h = w/1.73;\r\nAndroid.showToast(w);\r\nvar divs = document.getElementsByClassName('content');\r\n for(var i = 0; i < divs.length; i++) {\r\n divs[i].style.height= h+'px';\r\n divs[i].style.width= w+'px'; \r\n }\r\n if (window.jQuery) { \r\n // jQuery is loaded \r\n Android.showToast('Yeah!');\r\n } else {\r\n // jQuery is not loaded\r\n Android.showToast('Doesnt Work');\r\n }\r\nAndroid.showToast1();\r\n}\r\n\t\r\n$(function(){\r\n $('.likebtn').click(function (){\r\n var p = $(this).closest('div[class^=\"content\"]').index();\r\n Android.likeCard(p); \r\n });\r\n});\r\n\r\n$(function(){\r\n $('.sharebtn').click(function (){\r\n var p = $(this).closest('div[class^=\"content\"]').index();\r\n Android.shareCard(p); \r\n });\r\n});\r\n\r\n$(function(){\r\n $('.savebtn').click(function (){\r\n var p = $(this).closest('div[class^=\"content\"]').index();\r\n Android.saveCard(p); \r\n });\r\n});\r\n\r\n$(function(){\r\n $('.openFullcard').click(function (){\r\n var p = $(this).closest('div[class^=\"content\"]').index();\r\n Android.openFullcard(p); \r\n });\r\n});\r\n\r\n$(function(){\r\n $('.lazy').click(function (){\r\n var p = $(this).closest('div[class^=\"content\"]').index();\r\n Android.openFullcard(p); \r\n });\r\n});\t\r\nfunction showAndroidToast(toastmsg){\r\n\t\r\n\tAndroid.showToast(toastmsg); \r\n}\r\nfunction newpage(page){\r\n\tAndroid.nextDetail(page);\r\n}\r\nfunction appendText(extraStr) {\r\n //document.getElementById('addcards').innerHTML = document.getElementById('addcards').innerHTML + extraStr;\r\n $(document).ready(function(){\r\n $(\"#addcards\").html(extraStr);\r\n\t});\r\n}\r\n\r\n
</script>\r\n
</html>
These are the settings for web browsing.
webView.getSettings().setBuiltInZoomControls(false);
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setRenderPriority(RenderPriority.HIGH);
webView.getSettings().setPluginState(PluginState.ON);
webView.getSettings () setPluginsEnabled (true). . WebView.getSettings () setAllowFileAccess (true);
Below are the jquery libraries that I download
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js
, , .
Ant .
.