getElementById 在 Android WebView 上返回 null（仅适用于本地 html）答案

【问题标题】：getElementById returning null on Android WebView (only with local html)getElementById 在 Android WebView 上返回 null（仅适用于本地 html）
【发布时间】：2015-12-17 05:32:43
【问题描述】：

由于测试目的，我目前正在编写一个简单的 Android 应用程序。其中有一个 WebView-Element，其中应显示资产文件夹中的 html 文件（使用 javascript (Mozilla PDFJS)）。来自片段代码：

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 控制台输出，并且由于 requestet pdf-page 的呈现没有发生（仍然正常显示标题）

I/chromium: [INFO:CONSOLE(22)] "Uncaught (in promise) TypeError: Cannot read property 'getContext' of null"，来源：file:///android_asset/ (22)

第 22 行参考

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

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

【问题讨论】：

标签： javascript android html webview pdfjs

【解决方案1】：

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

<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 的调用放在查看器下方的另一个脚本标签中

【讨论】：

我应该这样做，认为它在远程端工作，这导致我出现另一个错误：我构建内容字符串的方式并不总是完整的，而是在 1024 个字符后被剪切。尽管如此，我还是把我的 JS 放在了 document.addEventListener("DOMContentLoaded", function(event) { ... }
内容字符串是什么意思？
在我的 Fragment-Code 的最后一行中，我引用了变量 content（它包含 HTML 代码），并且在某些情况下它可能会发生，该变量不包含所有代码。