Android：webview 无法在资产的不同目录中正确加载内部 html答案

【问题标题】：Android: webview doesn't load inner html correctly in different directory from assetAndroid：webview 无法在资产的不同目录中正确加载内部 html
【发布时间】：2014-08-05 08:30:16
【问题描述】：

我有一个加载 static-inner-site 的 webview：这个网站由 html、css、js、image、jQuery mobile 组成。

主页是index.html。

Index.html 包含其他页面。 (jquery-approach)

我的意图是：

将包含整个网站的 zip 文件放入资产文件夹
当 Activity 开始时，它应该将 zip 文件复制到 app-context 上的另一个位置
解压文件（正确创建了整个结构）
从最后一个位置加载 index.html（然后是整个网站）

问题是：

我只能加载 index.html：其他页面打不开。但是：

如果我将整个网站放入（然后加载）到资产文件夹中，那就可以了。

PS：css加载正确，但我认为javascirpt没有正常工作

提前致谢。

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>

这是加载 webview：我只报告加载页面的代码。我插入两种方案加载页面：显然我用的是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




    }

【问题讨论】：

标签： android jquery html webview assets

【解决方案1】：

加载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>

【讨论】：

谢谢你。我试过你的建议，但没有用。我能够加载正确的内容，只是将 html 放在另一个路径（不同于资产）中，但留在资产文件夹、css、js 和图像中。我想知道是否有在资产文件夹之外加载整个网站的解决方案......非常感谢