Issue
I'm developing an application in which webview loads the html data which is coming as string from the server.Actually showing that html string in webview is working fine but taking long time if there are any images in that data.So,I think of lazy loader will be good in this case.
For this lazy loading we are using jquery functions in html string.When i tried to run this it's giving me below security exception
I/chromium(4434): [INFO:CONSOLE(3)] "Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'about:/blank' cannot be created in a document with origin '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 is working fine.
Below string is the html data i'm trying to load into 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);\">
<!-- CARD ONE Image and Text-->\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 giving for webview
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 i'm loading
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
Sorry i really don't know how to format question.
Ant suggestions will be grateful.
Thanks in advance.
Solution
It took a lot of time to go through your html code and finally found the problem while checking through your complete format.
The comments in your script tag is causing the problem, the comments are commenting out the rest of the script and html code hence its a formatting issue and nothing else in your code. Please remove the comments in the HTML code
"// jQuery is loaded"
,
"// jQuery is not loaded
" and
"//document.getElementById('addcards').innerHTML = document.getElementById('addcards').innerHTML + extraStr;"
, in the script tag. Hope this solves your issue.
Answered By - Bharath Keshava
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.