如何在 YouTube 上以编程方式加载评论部分?(无滚动) (JS/HTML/DOM) [英] How to Load the Comment Section Programmatically on YouTube? (Without Scrolling) (JS/HTML/DOM)

问题描述

我正在创建一个浏览器扩展程序来增强 YouTube 的键盘导航.我想到的捷径之一是评论¹.

I'm creating a browser extension to enhance YouTube's keyboard navigation. One of the shortcuts I have in mind is for commenting¹.

起初，YouTube 不会加载视频下方的评论部分.只有当您向下滚动时，评论部分才会出现².那么我怎样才能找出哪个事件触发了评论部分的加载呢?我怎样才能人为地调度它?— 否则评论框的 HTML 元素将不存在.

At first, YouTube doesn't load the comment section below a video. Only when you scroll down does the comment section appear². So how can I find out which event is triggering the comment section to load? And how can I artificially dispatch it? — Otherwise the HTML element for the comment box will be nonexistent.

这个问题是另一个的延续.

_{1:我目前正在使用 Dart，但它模仿了 JS，后来还是被转译为它.
2:例如，当一个 YouTube 页面重新加载/导航到另一个页面时，会触发事件 yt-navigate-start.}

推荐答案

我目前也在做这件事的扩展.

I am currently working on the extension doing that thing too.

(参见 https://github.com/cyfung1031/Tabview-Youtube)

我终于找到了以编程方式重新加载它的解决方案.

I finally figure out the solution to programmatically reload it.

执行加载评论"需要一组标准

There is a set of criteria you need to have to perform the "loading of comments"

1.ytd-comments#comments 必须位于可见区域.

1. The ytd-comments#comments must be in a visible area.

您可以将position:absolute和负z-index隐藏在页面，但仍然可见".你不能让它 display:none 或内容可见性:隐藏.此外，它应该有高度和宽度，所以它的 getBoundingClientRect() 在可见区域(屏幕查看)

You can make it position:absolute and negative z-index to hide in the page but still "be visible". You cannot make it display:none OR content-visibility:hidden. Also, it shall have height and width, so that its getBoundingClientRect() is within the visible area (screen view)

2.属性 [hidden] 在 ytd-comments#comments 上设置.

2. Attribute [hidden] is set on ytd-comments#comments.

3.#continuations 存在于 ytd-comments#comments 中.

3. #continuations exists and inside the ytd-comments#comments.

非零大小的块元素 #continuations 是唯一的元素在 ytd-comments#comments 中，有自己的维度.这是用于检测加载机制的可见性.它总是在执行触发的部分的结尾.

The non-zero size block element #continuations is the only element inside the ytd-comments#comments with its own dimension. This is used to detect the visiblity of the loading mechanism. It is always at the end of the section to perform the triggering.

当您使用 make scroll 或 window.dispatchEvent(new Event("scroll")); 时，Youtube 编码中 scroll 事件上的事件侦听器将检测可见性并执行加载.

When you use make scroll, or window.dispatchEvent(new Event("scroll"));, the event listener on the scroll event in Youtube's coding will detect the visibility and perform the loading.

您必须等待 Youtube 为您准备这些内容(即 #continuations)，然后您可以使用 ytd-comments#comments 的属性 触发[隐藏] 和 window.dispatchEvent(new Event("scroll"));

You must wait Youtube to perpare the stuff for you (i.e. #continuations) , and then you can trigger with ytd-comments#comments's attribute [hidden] and window.dispatchEvent(new Event("scroll"));

获取内容后，属性[hidden]将被删除.

After the content is feteched, attribute [hidden] will be removed.

您可以查看我的用户脚本 https://greasyfork.org/scripts/428651-tabview-youtube 用于 Youtube Tabview 插件.

You might check my userscript https://greasyfork.org/scripts/428651-tabview-youtube for Youtube Tabview plugin.

这篇关于如何在 YouTube 上以编程方式加载评论部分?(无滚动) (JS/HTML/DOM)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！