我正在开发一个应用程序，其中 webview 加载来自服务器的作为字符串的 html 数据。实际上显示 webview 中的 html 字符串工作正常但如果该数据中有任何图像需要很长时间。所以，我认为延迟加载器在这种情况下会很好。
对于这种延迟加载，我们在 html 字符串中使用 jquery 函数。当我尝试运行它时，它给了我下面的安全异常
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)
但是当我尝试从本地 Assets 运行时，一切正常。
下面的字符串是我试图加载到 webview 中的 html 数据。
<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>
这些是给 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);
下面是我正在加载的 jquery 库
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 的建议将不胜感激。
提前致谢。
最佳答案
花了很多时间检查你的html代码，最后在检查你的完整格式时发现了问题。
您的脚本标记中的注释导致了问题，这些注释注释掉了脚本和 html 代码的其余部分，因此它是一个格式问题，您的代码中没有其他问题。 请去掉HTML代码中的注释
"// jQuery is loaded"
,
"// jQuery is not loaded
"和
"//document.getElementById('addcards').innerHTML = document.getElementById('addcards').innerHTML + extraStr;"
，在脚本标签中。 希望这能解决您的问题。
关于android - 当我将 html 数据从字符串加载到 webview 时，Jquery 功能不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30474745/