Javascript 将HTML分成页面，拆分长段落_Javascript_Jquery_Html_Dom

Javascript 将HTML分成页面，拆分长段落

javascript jquery html dom

Javascript 将HTML分成页面，拆分长段落,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我甚至不确定用我目前的方法是否可以做到这一点。我正在尝试将HTML文档的内容放入与当前视口大小相同的页面中。目前，我通过迭代文档的所有元素并检查它们的顶部偏移量是否在当前页面的边界内来实现这一点。如果不在当前页面的边界内，则该偏移量将成为新页面的开始，页面边界将设置为该偏移量加上视口的高度我面临的问题是，通常会有一个元素（例如段落）的高度大于视口本身，因此即使算法将该元素放置在新页面的开头，其内容也会溢出。我试图找到一种方法来分割这些元素，使第一个片段占据页面的剩余部分这带来了进一步的困难。

我甚至不确定用我目前的方法是否可以做到这一点。我正在尝试将HTML文档的内容放入与当前视口大小相同的页面中。目前，我通过迭代文档的所有元素并检查它们的顶部偏移量是否在当前页面的边界内来实现这一点。如果不在当前页面的边界内，则该偏移量将成为新页面的开始，页面边界将设置为该偏移量加上视口的高度

我面临的问题是，通常会有一个元素（例如段落）的高度大于视口本身，因此即使算法将该元素放置在新页面的开头，其内容也会溢出。我试图找到一种方法来分割这些元素，使第一个片段占据页面的剩余部分

这带来了进一步的困难。即使我能找到一种方法来确定一个段落的文本中有多少仍然适合页面的其余部分，而这本身已经被证明是相当困难的，我仍然会遇到这样的问题：在拆分该段落后，DOM不会立即更新，这将打乱下一页的计算，或者至少迫使我打破递归，这将使算法更加复杂

任何关于如何以第一部分占用页面剩余空间的方式拆分段落的建议都是欢迎的。这是我目前的代码：

编辑：值得注意的是，这只适用于没有绝对定位或浮动元素的非常简单的HTML。这对我来说不是问题

你可以有一个索引文件并制作框架。我知道这是老派的，但也许吧

    <html>
    <head>
    <title>Example for Stackoverflow</title>
    </head>
    <frameset rows="28,*,0" frameborder="0" border="0" framespacing="0">
        <frame name="topNav" src="top_nav.html" scrolling="no" noresize>
    <frameset cols="110,*,150" frameborder="0" border="0" framespacing="0">
        <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="related" src="related.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
    </frameset>
    <noframes>
    <p>This section (everything between the 'noframes' tags) will only be displayed if the users' browser doesn't support frames. You can provide a link to a non-frames version of the website here. Feel free to use HTML tags within this section.</p>
    </noframes>

    </frameset>
    </html>


Stackoverflow示例
仅当用户的浏览器不支持框架时，才会显示此部分（“noframes”标记之间的所有内容）。您可以在此处提供指向网站非框架版本的链接。在本节中可以随意使用HTML标记

我做过类似的事情。我采取的方法是检查页面容器的高度。如果大于最大值，我知道元素需要移动到下一页

如果有多个元素，我可以将最后一个元素移动到下一页

如果只有一个元素，则需要将其拆分。我们将此元素称为X。因此，您可以在下一页中创建一个新段落/节，我们将此元素称为Y。您现在可以将单词或字符从元素X的结尾移动到元素Y的开头，直到元素X的高度适合页面

在这之后，你可以重复下一页。

一种简单的方法是计算段落中1/2个单词的大小，看看是否合适，如果合适，将大段落一分为二，或者再次拆分。是的，这实际上是我最初的方法。问题是，这可能会在下一页留下几个段落片段，这将改变文本的正常流程。此外，由于DOM在函数返回之前不会得到更新，因此似乎无法在不中断递归的情况下检查1/2个单词是否适合页面。如果单个段落大于整个页面，显然段落将被拆分。至于递归，通常递归在任何情况下都是错误的答案。是的，如果一个段落不适合页面，可以将其一分为二，但前提是每个页面上只有一个片段。拆分一半，直到一半适合页面将导致更多的碎片比实际需要，这将导致句子在中间被打破在一个单一的网页，例如。另外，我想不出一种不使用递归就迭代所有DOM元素的好方法。谢谢，但这并不是我想要的。最后，在计算了分页符之后，我将使用它们生成几个独立的HTML文档。我想这是我用这种方法得到的最接近的结果。我按照你的建议复制单词，直到元素合适为止，但这也有一些困难。我想我会用我的新问题来开始一个新问题。事实上，一旦我答对了，这个问题就很有效了，谢谢。你可以想象用这种方式有一个单词的页面，对吗？

    <html>
    <head>
    <title>Example for Stackoverflow</title>
    </head>
    <frameset rows="28,*,0" frameborder="0" border="0" framespacing="0">
        <frame name="topNav" src="top_nav.html" scrolling="no" noresize>
    <frameset cols="110,*,150" frameborder="0" border="0" framespacing="0">
        <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="related" src="related.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
    </frameset>
    <noframes>
    <p>This section (everything between the 'noframes' tags) will only be displayed if the users' browser doesn't support frames. You can provide a link to a non-frames version of the website here. Feel free to use HTML tags within this section.</p>
    </noframes>

    </frameset>
    </html>