getElementById 在 Android WebView 上返回 null（仅限本地 html）

Question

出于测试目的，我目前正在编写一个简单的 Android 应用程序。其中有一个 WebView-Element，其中应显示资产文件夹中的 html-File（带有 javascript (Mozilla PDFJS)）。来自 Fragment-Code:

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
webView.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "utf-8", null);

内容已包含以下内容 html:

<script type="text/javascript">
var mypdf = null;
var currentPage = 1;
PDFJS.workerSrc = 'file:///android_asset/pdf.worker.jas';

PDFJS.getDocument('file:///android_asset/pdf.pdf').then(function(pdf) {
    mypdf = pdf;
    renderPage(currentPage);
});

function renderPage(pageNumber) {
    mypdf.getPage(pageNumber).then(function(page) {
        var scale = 1;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('viewer');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height-40;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });

}
</script>
....
<body>
<h1>Header</h1>
<canvas id="viewer"></canvas>
</body>

在 logcat 中，我收到以下 chromium 控制台输出，并且由于请求 pdf-page 的渲染没有发生（仍然 header 正常显示）

I/chromium﹕ [INFO:CONSOLE(22)] "Uncaught (in promise) TypeError: Cannot read property 'getContext' of null", source: file:///android_asset/ (22)

第 22 行参考

var context = canvas.getContext('2d');

当我通过 webView.loadUrl("http://www.dennissch.de/pdftest/"); 从远程服务器加载完全相同的文件（替换文件：///-链接）时；一切正常。那么为什么 document.getElementById 似乎不适用于本地文件？

Answer 1

这可能是因为您的脚本标记声明在 canvas 之上。尝试将您的标签放在查看器下方，它应该可以工作

<body>
<h1>Header</h1>
<canvas id="viewer"></canvas>
<script type="text/javascript">
var mypdf = null;
var currentPage = 1;
PDFJS.workerSrc = 'file:///android_asset/pdf.worker.jas';

PDFJS.getDocument('file:///android_asset/pdf.pdf').then(function(pdf) {
    mypdf = pdf;
    renderPage(currentPage);
});

function renderPage(pageNumber) {
    mypdf.getPage(pageNumber).then(function(page) {
        var scale = 1;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('viewer');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height-40;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });

}
</script>
</body>

或者至少将对 renderPage 的调用放在另一个脚本标记中的查看器下方

getElementById 在 Android WebView 上返回 null（仅限本地 html）

getElementById returning null on Android WebView (only with local html)

html

javascript

android

webview

pdf.js