js更改本地html字体大小页面位置不发生改变

做html页面小说阅读器时，发现更改webview的字体后，原来的位置不见了，因此想从js入手，改变字体大小后也能回到原来位置

具体做法：

先初始化webview 以及websettings，我在外部做了几个按钮，用来改变字体大小，调用的代码如下；

<span style="white-space:pre">	</span>            String js1 = " index = 0;\n"
                            + " nearIndex = null;\n"
                            + " var scrollTop  = document.body.scrollTop;\n"
                            + " var tags = document.getElementsByTagName(\"body\")[0].children;\n"
                            + " getNearIndex(tags, scrollTop);\n";
                    String js = "var d = document.getElementsByTagName('body')[0];\n"
                            + " d.style.fontSize = '" + font_size + "px';\n";
                    String js2 = " indexTemp = 0;\n"
                            + " skipScroll(tags, nearIndex);\n";

                    mWebView.loadUrl("javascript:(function(){" + js1+js+js2 + "})()");
                    SPUtils.setInt(UIUtils.getContext(), "mobifont", font_size);

这是通常的js做法，我刚开始是直接用js那一句，改变字体大小会发生变化，所以我现在加了两句 js1 +js2

还有一步你需要在初始化过程之前（加载html之前），提前给html写入一段js进去 如下：

final String path = UIUtils.getAppFile() + dirname + "/jingjing.html";
        String comment = mobi.openMobi(mFilePath + mFileName, dirname);
        //解决打不开的mobi情况 1.''是代表c解析不了的格式，?J是代表乱改后缀的格式
        if (comment.equals(""))
            comment = "?J";
        if (!comment.equals("?J")) {
            //js代码
            String result = comment.replace("</html>", "<script>" +
                    "   var index = 0;\n" +
                    "   var nearIndex = null;\n" +
                    "   var indexTemp = 0;\n" +
                    " function getNearIndex(tags, scrollTop) {\n" +
                    "        for (var i = 0; i < tags.length; i++) {\n" +
                    "            index++;\n" +
                    "            var tagTop = getPos(tags[i]);\n" +
                    "            if (tags[i].children.length > 0) {\n" +
                    "                getNearIndex(tags[i].children, scrollTop);\n" +
                    "            }else {if (parseInt(tagTop) > parseInt(scrollTop) && nearIndex==null) {//防止获取多层最近标签\n" +
                    "                    nearIndex = index;\n" +
                    "                    return;}}}}\n" +
                    "  function skipScroll(tags, nearIndex) {\n" +
                    "        for (var i = 0; i < tags.length; i++) {\n" +
                    "            indexTemp++;\n" +
                    "            console.log(indexTemp, nearIndex);\n" +
                    "            if (indexTemp == nearIndex) {\n" +
                    "                document.body.scrollTop = getPos(tags[i]);\n" +
                    "                return;\n" +
                    "            }\n" +
                    "            if (tags[i].children.length > 0) {\n" +
                    "                skipScroll(tags[i].children, nearIndex);\n" +
                    "            }}}\n" +
                    "  function getPos(o) {//取元素坐标\n" +
                    "            var  y = 0;\n" +
                    "            do {\n" +
                    "                y += o.offsetTop;\n" +
                    "            } while (o = o.offsetParent);\n" +
                    "            return y;\n" +
                    "        }\n" +
                    "   function toCatalog() {\n" +
                    "        var allTag = document.getElementsByTagName(\"a\");\n" +
                    "        for (var i = 0; i < allTag.length; i++) {\n" +
                    "            if (allTag[i].getAttribute(\"href\") != null) {\n" +
                    "                window.scrollTo(0, getPos(allTag[i]));//遍历所有a标签，找到第一个带有href属性的，获取高度，并跳出循环\n" +
                    "                break;\n" +
                    "            }\n" +
                    "        }\n" +
                    "    }</script></html>");
            writeFile(result, path);
            //webView.loadData(comment, "text/html; charset=UTF-8", null);
            //init local file
            mWebView.loadUrl("file://" + path);

提前写入备好的js根据滚动条位置查找最近P标签的位置。

这样就能使改变字体后也能回到原来位置的需求完成了。

最后附上在web端的代码：