Question

由于测试目的，我目前正在编写一个简单的Android应用程序。在其中有一个WebView-Element，其中应显示资产文件夹中的html-File（带有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中，我收到以下chrome控制台输出，因为requestft pdf-page的呈现没有发生（仍然，标题正常显示）

I / chromium：[INFO：CONSOLE（22）]“Uncaught（in promise）TypeError：无法读取属性'getContext'的null”，source：file：/// android_asset /（22）

第22行引用

var context = canvas.getContext（'2d'）;

当我通过webView.loadUrl（“http://www.dennissch.de/pdftest/”）从远程服务器（替换文件：/// - links）加载完全相同的文件时;一切正常。那么为什么document.getElementById似乎不能在本地文件上工作呢？

Answer 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调用放在另一个脚本标记

中

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

1 个答案: