YouTube 在主页上的动态加载是如何工作的？

Question

我正在做一个扩展，将在主页上的每个视频下方放置一个按钮，但我很快发现仅使用 selectAll 语句是不可能的。 selectAll 语句所做的唯一一件事就是检索主页上的前 3 行视频。我认为发生的事情是在页面加载后加载了视频，因此元素不存在于“document_end”（这是我的 chrome 扩展将 js/css 注入到这一页）。我会寻找类似事件侦听器的东西，但也希望能解释为什么会发生这种情况。

Answer 1

您可以通过在内容脚本中使用 MutationObservers 来解决这个问题。

来自下面 mdn 网络文档的示例，您应该能够通过在回调函数中使用 document.querySelectorAll() 来调用和查找新元素。

// Keep track of DOM element changes under <html> and run callback with mutationsList and observer once DOM changes
// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationList, observer) {
    // Use traditional 'for loops' for IE 11
    for(const mutation of mutationList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

YouTube 在主页上的动态加载是如何工作的？

How does YouTube's dynamic loading on the homepage work?

javascript

youtube

google-chrome-extension

dom-events

domcontentloaded