Question

我想在Webview中显示简单的Bootstrap表起诉Jquery。

在桌面浏览器上正常运行，但在webview的Chrome调试器中，它会抛出以下异常。

Android Webview Uncaught ReferenceError: $ is not defined

通过以下方式设置Webview：

public void setWebview() {
    try {
        AssetManager mgr = getBaseContext().getAssets();
        mWebView = (WebView) findViewById(R.id.intro_browser);

        InputStream in = mgr.open("www/table.html", AssetManager.ACCESS_BUFFER);
        String htmlContentInStringFormat = StreamToString(in);
        in.close();

        // Set Chrome instead of the standard WebView
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.getSettings().setJavaScriptEnabled(true);
            mWebView.getSettings().setAllowFileAccessFromFileURLs(true);
            mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        mWebView.clearCache(true);
        mWebView.clearHistory();
        mWebView.getSettings().setAllowContentAccess(true);
        mWebView.getSettings().setBlockNetworkImage(false);
        mWebView.loadDataWithBaseURL(null, htmlContentInStringFormat, "text/html", "utf-8", null);
    } catch (Exception e) {
        Log.d("TEST", e.getMessage());
    }

    }

assets / www文件夹中的HTML如下：

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table Fixed Header</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="bower_components/jquery/src/jquery-2.1.4.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>


    <style>
        .table-responsive>.fixed-column {
          position: absolute;
          display: inline-block;
          width: auto;
          border-right: 1px solid #ddd;
        }
        @media(min-width:768px) {
          .table-responsive>.fixed-column {
            display: none;
          }
        }

        /*Heading */

    </style>

</head>
<body>
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed header-fixed">
        <thead>
        <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
$( document ).ready(function() {
    console.log( "ready!" );
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    $fixedColumn.find('tr').each(function (i, elem) {
      $(this).height($table.find('tr:eq(' + i + ')').height());
    });

    //ALert is not called in the Webview
    alert("TEST");
});

    </script>
</body>
</html>

我该如何解决？非常感谢任何建议。

Answer 1

尝试将您的UA（用户代理）更改为

Mozilla/5.0 (Linux; Android 4.1.1; HTC One X Build/JRO03C) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.58 Mobile Safari/537.31

在我的情况下，我正在改变UA并且出现问题。当我改为这个值时，一切正常。

我发现了这个：

https://github.com/jitsi/jitsi-meet/issues/362

Android Webview Uncaught ReferenceError：$未定义

1 个答案: