首页 > 解决方案 > 如何检测网站的主要内容块?

问题描述

我一直想知道“阅读模式”扩展如何准确地知道主要内容在哪里。

如果那里的每个网页的主要内容都在标有 id#content或其他内容的 div 中。但是有没有办法知道哪个 div 是主要内容的包装器?

这就是我想做的

我想创建一个脚本,在其中我在任何网页的右侧注入一个文本框,以便我可以做笔记(Eloquent 是一个示例 chrome 扩展,它执行此操作 - 但它不会推送内容,它使文本框改为可拖动- 不喜欢它)。然后我做的笔记会进入我的 mongo 数据库(全部完成)

但是当我将文本框添加到页面时,我很想将主要内容推到一边。

这是我到目前为止的截图

在此处输入图像描述

正如我所说,如果我希望它仅在 wikipedia 上运行,例如我可以硬编码元素 id/class。但是有没有办法检查主要内容,无论开发人员如何标记它

标签: javascriptcss

解决方案


不幸的是,没有办法绝对确定互联网上的每个页面。有一些机制可以尝试并指示页面的“主要”位是什么。两种“主要”方法是

  1. 标签_<main/>

HTML 元素代表文档的主要内容。主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。

  1. role="main"

主要地标角色用于指示文档的主要内容。主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。

但是,网站并没有违反任何真正的规则,如果它们不包含其中任何一个,它们仍然会在大多数浏览器中呈现。它们主要是帮助需要屏幕阅读器的用户能够查看内容的方法。

您提到您正在查看 Wikipedia 是如何做到的,并且他们使用了该role="main"机制。


推荐阅读