Читаем комментарии постов в ленте во всплывающем окне, как на Reddit
По некоторым причинам иногда при сёрфинге пикабу бывает неудобно открывать много новых окон с постами, поэтому решил реализовать простенькое решение, позволяющее открывать пост не в отдельной вкладке, а во всплывающем окне в текущей вкладке, через iframe.
Для этого понадобится расширение, позволяющее запускать дополнительный JavaScript-код на каком-либо сайте. Я использовал расширение для Chrome Custom JavaScript for Websites 2. Уверен, для других браузеров есть аналогичные расширения.
Далее по клику на расширение необходимо добавить подключение jQuery, потому что куда мы без него?) Выбираем в правом верхнем углу "You can inject your own external scripts or predefined one:" JQuery 3.2.1
Ну и соответственно открыв вкладку с пикабу, открываем расширение и так же включаем "Enable cjs for this host".
Далее привожу код, который организует необходимый функционал. Его необходимо вставить в основное текстовое окошко:
$('body').append('<style>\.mypopup_bg{position: fixed;left:0px;top:0px;width:100%;height:100%;background-color: rgb(0 0 0 / 18%);z-index: 9999998;}\.mypopup {position: fixed;left: 15vw;top: 10vh;width: calc(100% - 25vw);height: calc(100% - 10vw);z-index: 9999999;}\.mypopup iframe {width: 100%;height: 100%;display: block !important;height:100% !important;}\.closing {position: fixed;right: 7vw;top: 10vh;width: 50px;height: 50px;z-index: 999999;font-size: 40px;cursor: pointer;}\</style>');
$('body').append($('<div class="mypopup_bg" style="display:none;"></div>'));
$('.mypopup_bg').append($('<div class="closing">×</div>'));
$(document).on('click', '.mypopup_bg', function(e) {
$('.mypopup').remove();
$('.mypopup_bg').hide();
});
$(document).on('click', '.story__comments-link', function(event) {\
event.preventDefault();
var link = $(this).attr('href');
$('body').append($('<div class="mypopup"></div>'))
const iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = link;
$('.mypopup').append(iframe);
$('.mypopup_bg').show();
});
Привожу комментарии к коду: первый абзац добавляет CSS-стили, второй - необходимый html, третий и четвертый вешает обработчики событий на закрытие\открытие попапа соответственно.
Далее жмём save и после, при нажатии на иконку комментариев под постом будет открываться попап-окно с содержимым поста, доскроленное до комментариев.
