Android：Webview无法在资产所在的其他目录中正确加载内部html

Question

I have a webview that load static-inner-site: this site is made up of html, css, js, image, jQuery mobile. 我有一个加载静态内部站点的Web视图：该站点由html，css，js，图像，jQuery mobile组成。

The main page is the index.html. 主页是index.html。

Index.html contains the others pages. Index.html包含其他页面。 (jquery-approach) （jQuery方法）

My intent is: 我的意图是：

To put a zip file containing the whole site into asset folder 将包含整个网站的zip文件放入资产文件夹
when the activity starts, it should copy the zip file into another location on the app-context 活动开始时，应将zip文件复制到应用程序上下文中的另一个位置
unzip the file ( created the entire structure correctly) 解压缩文件（正确创建了整个结构）
load index.html (and then the entire site) from that last location 从最后一个位置加载index.html（然后是整个网站）

The problem is: 问题是：

I can load only the index.html: other pages don't open. 我只能加载index.html：其他页面无法打开。 BUT: 但：

if I put (then load) the entire site in to asset folder, that works fine. 如果我将整个网站放入（然后加载）到资产文件夹中，则效果很好。

PS: the css is loaded correctly, but I thought that the javascirpt didn't work properly PS：CSS已正确加载，但我认为javascirpt无法正常工作

Thanks in advance. 提前致谢。

Index.html structure: Index.html结构：

<!DOCTYPE html>
<html>
<head>
    <title>MY-APP</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css" />
    <link rel="stylesheet" href="css/custom.css" />
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/jquery.mobile-1.4.3.min.js"></script>
    <script src="js/jquery.ui.map.js"></script>
    <script src="js/jquery.ui.map.extensions.js"></script>
    <script src="js/custom.js"></script>
</head>
<body>

<!-- HOMEPAGE -->
    <div data-role="page" id="home">

        <div role="main" class="ui-content">
            <img src="images/logo.png" class="logo" alt="" />
            <ul data-role="listview" class="lista-home ui-nodisc-icon" data-inset="true" data-theme="b">
                <li><a href="#verify-one">
                    <img src="css/images/icons-png/star-white.png" class="ui-li-icon" />One
                </a></li>
                <li><a href="#cerca-punti-vendita">
                    <img src="css/images/icons-png/location-white.png" class="ui-li-icon" />Two
                </a></li>
                <li><a href="#str-vr">
                    <img src="css/images/icons-png/bullets-white.png" class="ui-li-icon" />Three
                </a></li>
            </ul>

        </div><!-- /content -->

    </div><!-- /page -->

<!-- ONE -->
    <div data-role="page" id="verify-one">

        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-nodisc-icon">
            <a href="#home" class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-home">Home</a>
            <h1>ONE</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <ul data-role="listview" id="listagg" class="lista ui-alt-icon ui-nodisc-icon"></ul>
        </div><!-- /content -->

    </div><!-- /page -->

<!-- TWO -->
    <div data-role="page" id="verifica-matrice">

        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-nodisc-icon">
            <a href="#verify-one" class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-carat-l" data-transition="slide" data-direction="reverse">Indietro</a>
            <h1>TWO</h1>
            <a href="#home" class="ui-btn-right ui-btn ui-btn-inline ui-corner-all ui-btn-icon-right ui-icon-home">Home</a>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <table class="gioco-info">
                <tr>
                    <th><img src="" alt="" /></th>
                    <td></td>
                </tr>
            </table>
            <input name="matrice" id="matrice" value="" type="text" placeholder="Inserisci il numero della giocata" data-clear-btn="true" />
            <div class="center-wrapper">
                <a href="#esito-giocata" id="verifica-button" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all ui-icon-carat-r ui-btn-icon-right ui-nodisc-icon ui-shadow" data-transition="slide">BUTTON</a>
            </div>
        </div><!-- /content -->

    </div><!-- /page -->

<!-- THREE -->
    <div data-role="page" id="esito-giocata">

        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-nodisc-icon">
             <a href="#verifica-matrice" class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-carat-l" data-transition="slide" data-direction="reverse">Indietro</a>
            <h1>TRHEE</h1>
            <a href="#home" class="ui-btn-right ui-btn ui-btn-inline ui-corner-all ui-btn-icon-right ui-icon-home">Home</a>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <ul data-role="listview" id="lista-esito-giocata" class="esito-lista"></ul>
        </div><!-- /content -->

    </div><!-- /page -->

<!-- FOUR -->
    <div data-role="page" id="str-vr">

        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-nodisc-icon">
            <a href="#home" class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-home">Home</a>
            <h1>FOUR</h1>
            <a href="#" id="elimina-storico" class="ui-btn-right ui-btn ui-btn-inline ui-corner-all ui-btn-icon-right ui-icon-refresh">Empty</a>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <ul data-role="listview" id="lista-storico" class="lista ui-alt-icon ui-nodisc-icon"></ul>
            <p class="errore"></p>
        </div><!-- /content -->

    </div><!-- /page -->

<!-- FIVE -->
    <div data-role="page" id="esito-storico">

        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-nodisc-icon">
            <a href="#str-vr" class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-carat-l" data-transition="slide" data-direction="reverse">Indietro</a>
            <h1>FOUR</h1>
            <a href="#home" class="ui-btn-right ui-btn ui-btn-inline ui-corner-all ui-btn-icon-right ui-icon-home">Home</a>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <ul data-role="listview" id="lista-esito-storico" class="esito-lista"></ul>
        </div><!-- /content -->

    </div><!-- /page -->

<!-- SIX -->
    <div data-role="page" id="cerca-punti-vendita">

        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-nodisc-icon">
            <a href="#home" class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-home">Home</a>
            <h1>SIX</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <ul data-role="listview" id="listagg-pv" class="lista ui-alt-icon ui-nodisc-icon"></ul>
        </div><!-- /content -->

    </div><!-- /page -->



</body>
</html>

And this is the load webview: I report only the code for load the page. 这是加载Web视图：我仅报告用于加载页面的代码。 I insert the two solutions to load the page: obviously I use the method-1 or method-2 我插入两种解决方案来加载页面：显然我使用method-1或method-2

@SuppressLint("NewApi")
    private void loadWebView(String path) { 
        webview = (WebView) findViewById(R.id.webview);        

        webview.getSettings().setJavaScriptEnabled(true);    
        webview.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
        webview.getSettings().setDomStorageEnabled(true);
        webview.setBackgroundColor(Color.WHITE);

        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){


            Log.d(TAG,"SETTING for BUILD_VERSION..........");

            webview.getSettings().setAllowUniversalAccessFromFileURLs(true);
            webview.getSettings().setAllowFileAccessFromFileURLs(true);
        }

        webview.setWebViewClient(new WebViewClientcustom());
        webview.setWebChromeClient(new WebChromeClientCustom());

        String basepath="file:///"+path+ DIRECTORY_ROOT +"/";        
        Log.d(TAG,"basepath------> "+basepath);

        // METHOD-1 //

        webview.loadUrl(basepath+PAGE_SITE);

        // METHOD-1 //

        // METHOD-2 //

        String htmlPage=null;
        InputStream input;
        try {
            input = new FileInputStream(new File(path+"/" + DIRECTORY_ROOT + "/"+PAGE_SITE));

            int size = input.available();
            byte[] buffer = new byte[size];
            input.read(buffer);
            input.close();
            // byte buffer into a string
            htmlPage = new String(buffer);

        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }  

        webview.loadDataWithBaseURL(basepath, htmlPage, "text/html", "utf-8", "");

        // END METHOD-2




    }

Answer 1

For loading js script you need to use this tag. 要加载js脚本，您需要使用此标记。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <!--<link rel="stylesheet" type="text/css" href="./Dynamic Ratings - Duval DEMO_files/style.css">-->
    <title>Dynamic Ratings - Duval DEMO</title>
    <!--[if IE]><script type="text/javascript" src="javascript/excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="file:///android_asset/jquery.js"></script>
    <script type="text/javascript" src="file:///android_asset/englArrIni.js"></script>
    <script type="text/javascript" src="file:///android_asset/point.js"></script>
    <script type="text/javascript" src="file:///android_asset/dataManager.js"></script>
    <script type="text/javascript" src="file:///android_asset/triangleData.js"></script>
    <script type="text/javascript" src="file:///android_asset/triangleBuilder.js"></script>
    <script type="text/javascript" src="file:///android_asset/ratioTableData.js"></script>
    <script type="text/javascript" src="file:///android_asset/keyGasGraphBuilder.js"></script>
    <script type="text/javascript" src="file:///android_asset/code.js"></script>
    <style type="text/css">
        .style1
        {
            width: 169px;
        }
    </style>
</head>

Android：Webview无法在资产所在的其他目录中正确加载内部html

问题描述

1 个解决方案

解决方案1
-1 2014-08-05 08:35:52

Android：Webview无法在资产所在的其他目录中正确加载内部html

问题描述

1 个解决方案

解决方案1 -1 2014-08-05 08:35:52

解决方案1
-1 2014-08-05 08:35:52