当我将 html 数据从字符串加载到 webview 时，Jquery 功能不起作用

Posted

技术标签:

【中文标题】当我将 html 数据从字符串加载到 webview 时，Jquery 功能不起作用【英文标题】：Jquery functionalities are not working when i load the html data from a string into webview 【发布时间】：2015-08-09 02:00:07 【问题描述】：

我正在开发一个应用程序，其中 webview 加载来自服务器的字符串形式的 html 数据。实际上显示 webview 中的 html 字符串工作正常，但如果该数据中有任何图像则需要很长时间。所以，在这种情况下，我认为惰性加载器会很好。

对于这个延迟加载，我们在 html 字符串中使用 jquery 函数。当我尝试运行它时，它给了我以下安全异常

I/chromium(4434): [INFO:CONSOLE(3)] "Uncaught SecurityError: Failed to execute 'replaceState' on 'History': URL 'about:/blank' 的历史状态对象不能在来源为 'null' 的文档。”，来源：https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js (3)

但是当我尝试从本地资产运行时，一切正常。

下面的字符串是我试图加载到 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

对不起，我真的不知道如何格式化问题。

蚂蚁建议将不胜感激。

提前致谢。

【问题讨论】：

【参考方案1】：

花了很多时间检查你的html代码，最后在检查你的完整格式时发现了问题。

脚本标签中的 cmets 导致了问题，cmets 注释掉了脚本和 html 代码的其余部分，因此这是一个格式问题，而您的代码中没有其他内容。 请去掉 HTML 代码中的 cmets

"// jQuery 已加载"

，

"// jQuery 没有加载

" 和

"//document.getElementById('addcards').innerHTML = document.getElementById('addcards').innerHTML + extraStr;"

，在脚本标签中。 希望这能解决您的问题。

【讨论】：

我不敢相信那些 cmets 竟然不读取 jquery 函数。

以上是关于当我将 html 数据从字符串加载到 webview 时，Jquery 功能不起作用的主要内容，如果未能解决你的问题，请参考以下文章

如何在 WebView 中仅加载 .html 页面并在 iOS 的 Safari 中加载所有 www 页面？

当我将 .txt 文件加载到我的程序中时，如何删除这些随机整数（我根本没有输入）

从 HTML 将图像加载到 UITextview/WKWebView

当我将它添加到我的 html 文档时，向上/向下投票系统不起作用

如何将 swf 文件从内存加载到 QWebEngineView

Swift 5：给定的数据不是有效的JSON（将数据从API加载到表格视图）