Android:webview不会在资产的不同目录中正确加载内部html

时间:2014-08-05 08:30:16

标签: android jquery html webview assets


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

主页是index.html。

Index.html包含其他页面。 (jQuery的方法)

我的意图是:

  1. 将包含整个网站的zip文件放入资产文件夹

  2. 活动开始时,应将zip文件复制到app-context上的其他位置

  3. 解压缩文件(正确创建整个结构)

  4. 从最后一个位置加载index.html(然后是整个网站)

  5. 问题是:

    我只能加载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:我只报告加载页面的代码。 我插入两个解决方案来加载页面:显然我使用方法-1或方法-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
    
    
    
    
        }
    

1 个答案:

答案 0 :(得分:-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>