Поиск идентификатора CSS (или его идентификатора) для поля видеовстречи на Hangouts.google.com

Question

Я использую виджет «Веб-фрагмент» в среде KDE для рабочего стола, и мне интересно, как найти идентификатор CSS (или идентификатор CSS) для поля видеовстречи на Hangouts.google.com, чтобы я мог установить для веб-фрагмента значение покажи мне только эту часть страницы.

Информация для виджета «Веб-фрагмент» гласит:

Виджет Webslice позволяет отображать часть веб-страницы на рабочем столе или на панели. Веб-сайт полностью интерактивен. Укажите URL-адрес веб-страницы в поле URL.В поле "Элемент для отображения" введите идентификатор CSS (например, #mybox для элементов с идентификатором "mybox"). Это предпочтительный метод, так как он лучше всего работает с изменениями макета на веб-странице. "Кроме того, вы можете указать прямоугольник на веб-странице для использования в качестве среза. Используйте «x, y, width, height» в пикселях, например «100,80,300,360». Этот метод является запасным вариантом для веб-страниц, которые не предоставляют достаточно семантической разметки для вышеуказанного механизма. Если используются оба метода (элемент и геометрия), элемент будет иметь приоритет.

Answer 1

Виджет веб-фрагмента ссылается на "id" внутри веб-страницы - это буквально тег id="" который может быть присоединен к элементу div или любому другому.

Лучше всего проверить это на странице, намного более простой, чем Hangouts, чтобы вы могли оценить, как это работает.

Вам нужно использовать браузер с установленными инструментами разработчика, и я буду использовать этот сайт в качестве примера.

Справа от страницы SuperUser, когда вы смотрите на вопрос, есть боковая панель с мета-постами и связанными вопросами. Допустим, вы хотели веб-слайд боковой панели.

Если вы щелкнете правой кнопкой мыши по региону и выберете "Inspect", вы увидите HTML. Переходя от выбранного вами элемента, вам нужно найти элемент, который охватывает всю область, которую вы хотите, в веб-слайсе.

Вы можете увидеть, как это работает, наведя указатель мыши на элементы - вы переходите по каждому элементу, пока не найдете элемент, который окрашивает весь раздел в синий цвет.

Вы увидите <div id="sidebar" class="show-votes">

Это охватывает всю боковую панель, поэтому, используя URL-адрес этого вопроса и идентификатор "боковой панели", вы получите веб-срез только боковой панели.

Делать то же самое с Hangouts сложно. Каждый разговор - это собственная веб-страница. Если вы откроете диалог, вы увидите, что у него есть URL, но если вы возьмете URL и поместите его в новое окно браузера, вы ничего не получите. То же самое случилось бы с веб-слисом. Вероятно, это невозможно, потому что есть JavaScript, поддерживающий состояние, которое не переносится с URL.

Список контактов также сложен. Он содержится внутри iframe. Iframe заключен в div с идентификатором "Hangout-Landing-Chat", поэтому возможно, что это будет работать, но вряд ли.

Краткая версия этого id в веб-слайсе относится к идентификатору элемента веб-страницы (такого как div), который содержит все части страницы, которые вы хотите видеть - он является их родителем.