Question

我试图单击一个按钮将页面动态加载到div块中。为了测试它，我尝试附加一个带有文本的列表项＆＃34; abc＆＃34;进入加载的页面。但是，我总是得到一个空白页面。加载函数工作正常，因为如果我尝试加载静态页面，它的工作原理。以下是我的主要html页面代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LoadPageTest</title>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="./css/customizedstyle.css">
    <link rel="stylesheet" href="./css/themes/default/jquery.mobile-1.4.3.min.css">
    <link rel="stylesheet" href="./css/jqm-demos.css">
    <script src="./js/jquery.js"></script>
    <script scr="./js/customizedjs.js"></script>
    <script src="./js/jquery.mobile-1.4.3.min.js"></script>
    <script>
        $( document ).on( "pagecreate", "#demo-page", function() {

            $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
                if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
                    if ( e.type === "swipeleft" ) {
                        $( "#right-panel" ).panel( "open" );
                    } 
                }
            });
        });
        </script>

    <style type="text/css">
    body {
        overflow:hidden;
    }
    </style>
</head>
<body style= "overflow:hidden" scrolling="no">

<style type="text/css">
body {
    overflow:hidden;
}
</style>


<div data-role="page" id="main-page" style= "overflow:hidden" scrolling="no">

    <div role="main" class="ui-content" id ="maindiv" style= "overflow: auto">

        Will load diff pages here.

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

    <div data-role="panel" id="left-panel" data-theme="b">

        <ul data-role="listview" data-icon="false" id="menu">

            <li>
            <a href="#" id = "btnA" data-rel="close">Go Page A <img src="./images/icona.png" class="ui-li-thumb"/>
            </li>

            <li>
            <a href="#" id = "btnB" data-rel="close">Go Page B <img src="./images/iconb.png" class="ui-li-thumb"/>
            </li>

        </ul>

    </div><!-- /panel -->


    <script type="text/javascript">
        $("#btnA").on("click", function(){  

            $("#maindiv").empty();
            $("#maindiv").load("pageA.html");

        });

        $("#btnB").on("click", function(){  

            $("#maindiv").empty();

            $("#maindiv").load("pageB.html");
        });


    </script>

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

</body>
</html>

接下来是我尝试动态加载的页面的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page should be loaded</title>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="./css/customizedstyle.css">
    <link rel="stylesheet" href="./css/themes/default/jquery.mobile-1.4.3.min.css">
    <link rel="stylesheet" href="./css/jqm-demos.css">
    <script src="./js/jquery.js"></script>
    <script scr="./js/customizedjs.js"></script>
    <script src="./js/jquery.mobile-1.4.3.min.js"></script>
    <script>

        $(document).on('pagebeforeshow', function () {
            $('#postlist').append('<li> abc  </li>');
            $('#postlist').listview('refresh');
        });
    </script>

</head>
<body >

    <div data-role="page" id="posthome">
        <div data-role = "content">
            <ul data-role='listview' id = "postlist">

            </ul>
        </div>
    </div>
</body>
</html>

我怀疑是不是因为我的页面中的javascript无法正常工作，导致主页面中的滑动js代码似乎也无法正常工作。那可能吗？我已在活动文件的onCreate（）函数中启用了javascript，如下所示。

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_message);

        new LongRunningGetIO().execute();

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.setWebViewClient(new AppClient());
        mWebView.setVerticalScrollBarEnabled(false);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setDomStorageEnabled(true);
        mWebView.loadUrl("file:///android_asset/index.html");
    }

我注意到有声明警告启用javascript＆＃34;使用setJavaScriptEnabled可以将XSS漏洞引入您的应用程序，仔细查看＆＃34;。这可能是原因吗？然后，我在活动之上添加了@SuppressLint（＆＃34; SetJavaScriptEnabled＆＃34;）。警告消失了，但页面中的js代码似乎仍无效。

Answer 1

我有同样的问题，我可以解决它添加行

myWebView.setWebChromeClient(new WebChromeClient());

加载动态html页面时，android webview返回空白页面

1 个答案: