javascript - 如何在 node.js 中查找 HTML 元素的高度?

标签 javascript jquery html node.js headless-browser

这几天我一直被一个相当棘手的问题所困扰。我在 node.js 中的变量中有一个自动生成的 HTML 页面作为字符串。我需要找到一些 HTML 元素的高度并进行 HTML 操作(如标记创建、删除、追加、css 属性设置等)。

显然,我需要先为我的 HTML 页面创建一个类似 DOM 的结构,然后再继续。

虽然对于 HTML 操作,我有很多选项,例如 cheerionode.iojsdom 等,但这些都不允许我找到 Node 处元素的高度。

所以在浪费了很多时间之后,我决定寻找更重的解决方案,比如在 Node 上实现 headless 浏览器(phantomjs 等)并驱动元素 offsetHeight 通过纯 javascript。

谁能告诉我这样是否可以达到我的目标?哪种 headless 浏览器最适合这项任务?

如果我走错了方向,那么有人可以建议我任何其他可行的解决方案吗?

此时我已准备好尝试任何事情。

提前致谢!

注意:在我的特定情况下,在客户端使用 javascript 有很多问题,因为生成的 HTML 页面的内容应该由客户端用来粘贴到他的网站中。留下一个正在运行的 javascript 来重新构建 HTML 将使他的工作变得困难。

最佳答案

Node 的服务器端 HTML 库(如 cheerio 和 jsdom)是严格的 DOM API 模拟库。它们不会尝试实际呈现文档,而这是计算元素大小和位置所必需的。

如果您真的需要计算服务器上元素的大小,您需要像PhantomJS 这样的 headless 浏览器。 .它是一个带有 JavaScript API 的完整 WebKit 渲染器。它完全独立于 Node ,因此您需要使用 Phantom's API 编写实用程序脚本, 或使用 a npm module that lets you control Phantom from node .


阅读您问题下的评论后,很明显您不应该在服务器上计算高度。客户端代码是执行此操作的合适位置。

关于javascript - 如何在 node.js 中查找 HTML 元素的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20122279/

相关文章:

javascript - 如何在移动 View 中点击箭头时左右滚动内容?

javascript - 仅使用链接参数选择

javascript - 使用 formvalidation.io 成功启动 Bootstrap 模式

javascript - ASP.NET WebMethod 将整个页面返回给 JQuery ajax 请求

php - DHTMLX甘特图无效数据

html - 一个 :link and a:visited not working. ..?

javascript - 如何使用内部调用返回 promise 的函数的 jasmine-node 测试函数?

javascript - 使用 ajax 和 django 根据用户提供的值进行过滤

javascript - 两个 div 重叠,高度可变 = 容器上没有高度

html - 如何在移动版上交换第一个 div 和最后一个 div?