Las funcionalidades de JQuery no funcionan cuando carga los datos html de una cadena en webview

Estoy desarrollando una aplicación en la que webview carga los datos html que viene como una cadena desde el servidor.Actualmente mostrando que html cadena en webview está funcionando bien, pero tomando mucho tiempo si hay imágenes en ese data.So, creo Cargador lento será bueno en este caso.

Para esta carga perezosa estamos utilizando jquery funciones en html string.When intenté ejecutar esto es darme por debajo de la excepción de seguridad

Uncaught SecurityError: Error al ejecutar 'replaceState' en 'History': No se puede crear un objeto de estado del historial con la URL 'about: / blank' en un documento con origen 'Null'. ", Fuente: https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js (3)

Pero cuando intenté funcionar de los activos locales todo está trabajando muy bien.

Debajo de cadena es el html datos que estoy tratando de cargar en 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>

Estos son los ajustes que dan para 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);

A continuación se muestran las bibliotecas jquery que estoy cargando

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

Lo siento realmente no sé cómo dar formato a la pregunta.

Las sugerencias de hormigas estarán agradecidas.

Gracias por adelantado.

Tomó un montón de tiempo para ir a través de su código html y finalmente encontró el problema al comprobar a través de su formato completo.

Los comentarios en la etiqueta de script está causando el problema, los comentarios están comentando el resto de la secuencia de comandos y el código html por lo tanto, es un problema de formato y nada más en su código. Elimine los comentarios en el código HTML