Как сфокусировать элементы поисковых предложений YouTube?
В настоящее время у меня есть этот код. При нажатии средней кнопки мыши поиск YT откроется в новой вкладке:
(function() {
'use strict';
var searchIcon = document.getElementById("search-icon-legacy");
if (searchIcon) {
searchIcon.addEventListener("mousedown", function(event) {
event.preventDefault();
var searchInput = document.getElementsByClassName("ytd-searchbox")[3].value.trim();
if (event.which === 2 && searchInput) {
window.open("https://www.youtube.com/results?search_query = " + encodeURIComponent(searchInput), "_blank");
}
});
}
})();
Картинка
Сейчас я пытаюсь сфокусировать поисковые предложения, щелкнув их средней кнопкой мыши, но у меня возникают трудности, потому что я не знаю, как сфокусировать их, как кнопку поиска, которая является элементом.
Извините, что не четко описал. При наведении курсора мыши на элемент поиска он должен захватить текст из элемента и открыть его как результат поиска в новой вкладке, нажав среднюю кнопку мыши.
@JuliusEsen предложения возвращаются по запросу. Вы можете попробовать получить предложения, проверив элемент sbsb_b. Пример: document.getElementsByClassName("sbsb_b")[0].childNodes, а затем прочитать outerText каждого дочернего узла.
@MauricioAriasOlave Можете ли вы дать мне полезный подход или хороший метод? Является ли объявление const хорошей поддержкой в этом случае?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
если вы хотите открыть одно из предложений поиска на другой вкладке, щелкнув средней кнопкой мыши, то это должно сработать:
function callback(event){
if (!event.button === 1) return; // return if not middle button
const ele = event.target.closest('div.sbqs_c');
if (!ele) return; // guard incase it's wrong element because we are listening on `body` instead of `<ul>`
const url = `https://www.youtube.com/results?search_query=${encodeURIComponent(ele.textContent)}`;
window.open(url, '_blank');
}
document.body.addEventListener('auxclick', callback);
вы можете добавить прослушиватель «auxclick» к конкретному элементу (ul.sbsb_b) вместо тела, но для этого вам придется использовать наблюдатель мутаций, поскольку окно предложений не загружается до тех пор, пока пользователь не взаимодействует с полем поиска. .
@GTK Спасибо!
Я добавил ваш код в свой текущий обновленный код, и он работает :)
(function() {
'use strict';
function callback(event){
if (event.button !== 1) return; // return if not middle button
const ele = event.target.closest('div.sbqs_c');
if (!ele) return; // guard in case it's the wrong element because we are listening on `body` instead of `<ul>`
const url = `https://www.youtube.com/results?search_query=${encodeURIComponent(ele.textContent.trim())}`;
window.open(url, '_blank');
}
document.body.addEventListener('auxclick', callback);
// MutationObserver to observe changes in the DOM
const observer = new MutationObserver(() => {
const suggestions = document.querySelectorAll('div.sbqs_c');
suggestions.forEach(suggestion => {
suggestion.removeEventListener('auxclick', callback); // Ensure no duplicate listeners
suggestion.addEventListener('auxclick', callback);
});
});
// Configuration of the observer
observer.observe(document.body, {
childList: true,
subtree: true
});
})();
Что это значит:
trying to focus the search suggestions by middle-clicking them? Первую часть — открытие поиска YT в новой вкладке — я могу себе представить. Но я не могу представить, что вы пытаетесь сделать во второй части. Что именно вы включаете средней кнопкой мыши и что должно произойти, когда вы нажимаете на нее средней кнопкой мыши? Извините за тупость, но прошу вас объяснить немного подробнее / ясно.