Question

我正在尝试开发电子书阅读器类的Android应用程序。我需要根据可用的屏幕空间将长html字符串（在运行时由服务器发送）拆分成飞行中的页面。 Html内容是一篇文章，可能包含文本，图像，视频等。我正在使用WebView来显示HTML。

任何人都可以指导我如何实现这一目标。

提前致谢。

Answer 1

我认为，进行任何类型的HTML / DOM解析都会让你起步，这意味着你有效地开始开发自己的HTML布局引擎。

使用CSS3列功能更好。基本上，让您的内容在固定的width-and-height列中呈现。这将成为您的页面。然后将您的内容位置向左移动以在页面之间移动，并将其包装在将隐藏溢出元素的容器中。

我们的HTML基本上是：

<body>
    <div id="container">
        <div id="content">

            CONTENT GOES HERE

            <span id="endMarker"></span>
        </div>
    </div>
    <div>
        <button id="previous">Previous</button>
        <span id="page">Page N of M</span>
        <button id="next">Next</button>
    </div>
</body>

我们的基本CSS是：

#container {
    width: 240px;
    overflow: hidden;
    background-color: yellow;
}
#content {
    position: relative;
    height: 30em;

    -moz-column-width: 240px;
    -webkit-column-width: 240px;
    column-width: 240px;

    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
}

现在我们将为#content设置left CSS属性，以便在-250px的倍数内切换页面。

我们只需计算出内容所需的列数，并且我们已经进行了分页。 How to get css3 multi-column count in Javascript给出了一个提示：我们将从#endMarker的左侧位置找到它。

这是一个工作示例http://lateral.co.za/pages.html，其中包含Moby Dick的第一章。它适用于Chrome和Android，但不适用于Firefox - 我认为是因为CSS列实现的差异。由于我们对Android感兴趣，因此代码很好。

重要的部分是：

上面的CSS设置。
在内容之后添加<span id="endMarker"></span>（但在#content div内）
在#previous之外添加#next和#page按钮以及#container范围。

jQuery加载后的这个javascript：

var _column = 0;
var _columnCount = 0;
var _columnWidth = 240;
var _columnGap = 10;
$(function() {
    _columnCount = Math.floor($('#endMarker').position().left/(_columnWidth + _columnGap));

    setColumn = function(i) {
        _column = i;
        document.getElementById('content').style.left = -1 * _column * (_columnWidth + _columnGap);
        $('#page').html('Page ' + (_column+1) + ' of ' + (_columnCount+1));
    }
    $('#next').click(function() {
        if (_column==_columnCount) return;
        setColumn(_column+1);
    });
    $('#previous').click(function() {
        if (0==_column) return;
        setColumn(_column-1);
    });
    setColumn(0);
});

就是这样。

有工作的空间。有人可能想考虑一下列数的计算，我从引用的SO帖子中汲取它，但实际上没有想到它......容器的宽度似乎影响了内容的列宽，对我来说并不完全有意义。

但至少一切似乎都在运行，而不必进行任何HTML解析和自己的布局，至少在Chrome和Android上都是如此。

Answer 2

你必须解析HTML，最好是使用一些库，你可以在JavaScript中访问DOM。然后，您可以为解析的内容创建自定义布局。 WebView是否支持JavaScript？这将是一个很好的开始尝试。

显然你不能在HTML文件的任意位置拆分，你必须考虑HTML-Tags。修改DOM或拆分html后，您可以为内容提供自定义CSS文件，以您喜欢的方式显示它，并使用您的库或JavaScript添加一些分页。

使用<span style="display:none"></span>可以帮助您隐藏网站中的内容。然后你不必在物理上进行拆分（无论如何它在加载页面后都在内存中）。

希望有所帮助。你不会在这里获得完整的解决方案，但也许你有一些想法。如果您发现更具体的问题，可以更容易地提出更具体的问题。

将html字符串拆分为多个页面

2 个答案: