Brief

我正在try 用nodejs制作和发布阅读器.我没有找到一个解决方案来帮助我使我的项目工作.我试图获得的成就是将html(章节元素)内容拆分为两列,就像所有具有nextPage或previousPage功能的epub阅读器一样.

What i have tried

我try 的是获取章节的html内容,并将其插入到具有css columns的iframe中.我的解决方案是每次下一页时显示translateX(-containerWidth),但这似乎不是一个理想的解决方案,因为不知道列数就无法知道是否显示了内容.我还try 根据容器内容的宽度进行判断,但我无法获得,因为容器大小是固定的,通过添加column-width样式,容器可以垂直移动.

css列解决方案

我从这个网站上获得了解决方案(link)的线索,但是我甚至无法实现它,即使查看源代码.事实上,这个网站能够实现这个功能,这意味着css columns solution是可能的,如果可能的话,我想使用这个策略.

Code

<!-- HTML CONTAINER -->
<div id="book-content">
   <iframe>
        <html> 
        <body> <!-- content inside-->
   </iframe>
</div>
iframe html {
   overflow: hidden;
   width: 1000px; /* container width */
   height: 500px; /* container height*/
   column-fill: auto;
   column-gap: 100px;
   column-width: 400px;
   column-rule: 1px solid rgba(0, 0, 0, 0.5);
}
/* Js Script*/
var iframe_content = $(`<iframe id="book-iframe" data-id="${chapter.id}" scrolling="no" allowfullscreen="true" height="100%" width="100%" style="border: none; visibility: visible;" />`).appendTo($("#book-container").html('')).contents()
iframe_content.find('body').append(bookcontent);

book columns As you can see it works but the problem here is that i display only the first 2 columns of the chapter. The goal is to skip the chapter when it have displayed all the pages and skip the page when there are pages on that chapter to display. By searching on internet, I realized that using css columns is not the ideal solution to this problem, it would be better to create columns directly on javascript but i can't figure out how implement this.

Pseudo code ideal solution

function skipHandler(){
    if(contentToDisplay()){
      skipPage();
    } else {
      skipChapter();
    }
}

Summary

一次将html元素动态拆分为两列并考虑列数的最佳解决方案/策略是什么?

类似问题

重要的

  • 我正试图让这without个第三方解决方案奏效.
  • 如果有什么不清楚,我会提供更多的代码或描述.

目前正在查看

推荐答案

Solution

对于那些想用js创建epub reader而不知道如何创建的人来说,这个self 回答可能很有用.首先,我找不到一个不包含第三方库的解决方案,我用了epubjs个.这个答案只是关于读取epub文件,它不回答如何在没有第三方库的情况下将html内容动态拆分为列.不幸的是,我在任何地方都找不到答案.我希望这将有助于某人!

Javascript相关问答推荐

当点击注册页面上的注册按钮时,邮箱重复

Mongoose post hook在使用await保存时不返回Postman响应

加载背景图像时同步旋转不显示的问题

如何控制Reaction路由加载器中的错误状态?

我怎么在JS里连续加2个骰子的和呢?

使用getBorbingClientRect()更改绝对元素位置

如何使用JS创建一个明暗功能按钮?

Firebase函数中的FireStore WHERE子句无法执行

使用静态函数保存 node 前的钩子

将以前缓存的 Select 器与querySelector()一起使用

正在发出错误的URL请求

如何在底部重叠多个div?

我正在为我的单选按钮在HTML中设置一个值.使用Java脚本,我如何才能获得该值?

如何将PNG图像放在wix站点的Open Streemap map 上,使PNG图像成为 map 不可分割的一部分?

在Java脚本/类型脚本中覆盖父构造函数中的默认值

如果用户的页面宽度低于某个阈值,如何使用js更改html页面中的css文件

Reactjs创建新选项卡而不是新窗口

根据Vue 3中的父项宽度将props 值传递给子项

Mongoose updateOne()不能传入选项

在Next.js v12.3.1和Reaction v18.2.0";中缩小了REACT错误#418和#423