webview 分页 android,android-webview – 将html字符串分割成多个页面

做任何类型的HTML / DOM解析将会推动你走上墙,我想,这意味着你有效地开始开发自己的HTML布局引擎.

使用CSS3列功能是一个更好的主意.基本上,让您的内容在固定的宽高高度列中呈现.这成为你的页面.然后将您的内容位置移动到页面之间移动,并将其包装在将隐藏溢出元素的容器中.

我们的HTML基本上是：

CONTENT GOES HERE

Previous

Page N of M

Next

我们的基本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设置左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 span,都在#container外面.

>这个javascript之后jQuery加载：

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文件中吸取了它,但实际上并没有想到…容器的宽度似乎影响了内容的列宽,对我来说完全没有意义

但是,至少在Chrome和Android上,至少所有的东西似乎都没有任何HTML解析和自己的布局.