Как измерить ширину попапа в браузере яндекс
Перейти к содержимому

Как измерить ширину попапа в браузере яндекс

  • автор:

window.open()

Открывает ссылку в новом окне, в новой вкладке или в iframe.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Простой пример
  3. Как пишется
    1. Значения:

    Обновлено 9 ноября 2022

    Кратко

    Скопировать ссылку «Кратко» Скопировано

    Метод open ( ) объекта window позволяет открывать ссылки в новом окне, в новой вкладке или в iframe.

    Простой пример

    Скопировать ссылку «Простой пример» Скопировано

     window.open('https://practicum.yandex.ru/'); window.open('https://practicum.yandex.ru/');      

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Метод open ( ) имеет три опциональных параметра:

     window.open(url, target, windowFeatures); window.open(url, target, windowFeatures);      

    url – строка, которая содержит относительный или абсолютный URL.

    target – строка, которая указывает где откроется новое окно. Он может принимать те же значения, что и атрибут target тега : имя окна или одно из ключевых слов _self , _blank , _parent , _top .

    window Features – строка, которая позволяет детально описать, как будет выглядеть новое окно. Опции в строке указываются через запятую в формате name = value , для булевых типов значение можно опустить.

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

    Значения:

    Скопировать ссылку «Значения:» Скопировано

    Числовые:

    width or inner Width / height or inner Height — определит ширину и высоту содержимого окна включая полосы прокрутки. Минимальное возможное значения — 100px.

    left or screen X / top or screen Y — здесь можно указать расстояние от левой верхней части (или рабочей области) экрана пользователя, на котором откроется окно.

    Булевые:

    popup — открывает ссылку в новом окне

    menubar — отвечает за отображение строки меню

    toolbar — управляет показом кнопок панели инструментов и панели закладок

    location — отвечает за показ адресной строки

    resizable — позволяет включить/выключить возможность пользователям изменять размеры окна

    scrollbars — отображение полос прокрутки

    status — отображение строки состояния

    noopener — помогает повысить безопасность сайта, так как предотвращает доступ открываемого ресурса к текущей странице (через сеанс браузера).
    При использовании noopener значения второго параметра метода open ( ) (кроме _top , _self , _parent ), будут обработаны как _blank

    noreferrer — предотвращает передачу информации об исходном ресурсе на целевой. При установке этого значения как true noopener также становится true .

    Примеры использования

    Скопировать ссылку «Примеры использования» Скопировано

     window.open("https://ya.ru/", "_self"); // ссылка откроется в текущем окне window.open("https://ya.ru/", "yandex", "popup"); // ссылка откроется в новом окне, которое примет имя "yandex" window.open("https://ya.ru/", "_blank", "top=100, left=100, width=400, height=500"); // ссылка откроется в новом окне, величина отступов и размеры окна будут соответствовать указанным window.open("https://ya.ru/", "_self"); // ссылка откроется в текущем окне window.open("https://ya.ru/", "yandex", "popup"); // ссылка откроется в новом окне, которое примет имя "yandex" window.open("https://ya.ru/", "_blank", "top=100, left=100, width=400, height=500"); // ссылка откроется в новом окне, величина отступов и размеры окна будут соответствовать указанным      

    Возможности

    Скопировать ссылку «Возможности» Скопировано

    Использование метода open ( ) позволяет получить ссылку на новое окно и взаимодействовать с ним, например:

     const newWindow = window.open("", "new window", "popup");newWindow.document.write("

    Hello, World!

    ");
    // откроется новое окно с текстом "Hello, World!"
    const newWindow = window.open("", "new window", "popup"); newWindow.document.write("

    Hello, World!

    "
    ); // откроется новое окно с текстом "Hello, World!"

    Особенности применения

    Скопировать ссылку «Особенности применения» Скопировано

    Авторы MDN рекомендуют использовать метод open ( ) в крайних случаях и (никогда!) не прибегать к встроенному (inline) использованию window . open ( ) .

      a href='#' onclick='window.open(`any url`)'>     

    У метода open ( ) есть несколько недостатков:

    1. многие браузеры блокируют попапы.
    2. open ( ) решает за пользователя, как именно открыть ссылку. Улучшится ли пользовательский опыт, если чтению контента будут мешать неожиданно всплывающие окна или переходы на новую вкладку (вместо открытия их в фоновом режиме)? Вряд ли.
    3. инлайновые значения вызывают неожиданное поведение ссылки при взаимодействии с ней (и не только). Важно и то, что они также передают неправильную семантику скринридерам.

    Узнать подробнее можно на сайте MDN

    Блокирование всплывающих окон в Microsoft Edge

    Компонент Microsoft Edge, который блокирует всплывающие окна, эффективно предотвращает автоматическое открытие веб-сайтами нового окна или вкладки или частичного окна в верхней части текущей веб-страницы. Этот компонент включен по умолчанию.

    Существует множество типов всплывающих окон, включая рекламу, уведомления, предложения или предупреждения, которые могут появляться в разное время на любой веб-странице. Некоторые из них могут быть полезны, например, когда веб-сайт банка отображает ежемесячную выписку по счету во всплывающем окне. Всплывающие окна также могут быть отвлекающими или вредоносными, используя тактику фишинга, такую ​​как предупреждения, призы или бесплатные загрузки, чтобы вызвать у вас доверие к потенциальному мошенничеству.

    Примечание: Если вы получаете нежелательные уведомления веб-сайтов, пожалуйста, обратитесь к разделу Управление уведомлениями веб-сайтов в Microsoft Edge. Уведомления веб-сайтов появляются в центре уведомлений, расположенном в правом нижнем углу вашего устройства.

    Блокировка всплывающих элементов в Microsoft Edge

    1. В Edge перейдите в раздел Параметры и другое в верхней части браузера.

    Изображение меню

    Если этот компонент включен, и всплывающий элемент заблокирован, Edge отобразит в строке навигации вашего браузера следующее изображение.

    Значок блокировки всплывающего элемента в строке навигации Microsoft Edge.

    Разрешение всплывающих окон для определенного URL-адреса в Microsoft Edge

    Иногда необходимо разрешить всплывающие окна, чтобы определенное веб-приложение или веб-сайт работали должным образом. В таких случаях может потребоваться включить определенный URL-адрес во всплывающем списке разрешений.

      В Edge перейдите в раздел Параметры и другое в верхней части браузера.

    Изображение меню

    Добавление www.microsoft365.com в список разрешенных всплывающих окон и перенаправлений в разделе Разрешения сайта в Microsoft Edge.

    Что делать, если вы все еще видите всплывающие элементы

    Если после активации этого компонента вы продолжаете получать всплывающие элементы, попробуйте сделать следующее:

    • Убедитесь, что Edge обновлен.: выберите Параметры и другое >Параметры >О Microsoft Edge . Если обновление доступно, вы можете применить его отсюда.
    • Сканируйте устройство на наличие вредоносных программ.:Дополнительные сведения см. в статье Защита с помощью системы безопасности Windows..
    • Отключите свои расширения:. Проверьте, не в расширениях ли дело. Выберите Параметры и другое >Расширения >Управление расширением, а затем отключите каждое расширение. Если теперь всплывающие окна заблокированы, включите расширения одно за другим, чтобы определить, какое из них вызывает проблему.
    • Заблокируйте сторонние файлы cookie.:для этого выберите Параметры и другое >Параметры >Файлы cookie и разрешения для сайтов >Управление и удаление файлов cookie и данных сайта, и активируйте параметр Блокировать сторонние файлы cookie.
    • Очистите кеш браузера.. Дополнительные сведения см. в статье Просмотр и удаление истории браузера в Microsoft Edge.

    Что не может быть заблокировано блокировщиком всплывающих элементов?

    Если после того как вы включили этот компонент и попробовали перечисленные выше решения, вы по-прежнему видите всплывающие элементы, это может быть реклама веб-сайта, созданная так, чтобы выглядеть как всплывающие элементы. Рекламные объявления веб-сайтов не могут быть заблокированы блокировщиком всплывающих элементов Edge. Edge также не предотвращает открытие всплывающего элемента при выборе кнопки или ссылки на веб-странице.

    Примечание: Этот раздел посвящен новому браузеру Microsoft Edge . Получите справку по устаревшей версии Microsoft Edge.

    Попап создания метки подстраивается под ширину экрана.

    Фотография

    Подскажите как пройти этот кейс. Речь идет о Яндекс Почте Кейс 9. Попап создания метки подстраивается под ширину экрана.

    Предусловие: Пользователь авторизован. Открыта папка Входящие.

    Шаг 1: В левой колонке нажать на кнопку Создать метку.

    Ожидание: Открывается попап создания метки.

    Шаг 2: Проверить параметры попапа при ширине окна браузера 1600 px и 1000 px.

    Ожидание:
    При ширине окна браузера 1600 px – ширина попапа 432 px, высота 295.2.
    При ширине окна браузера 1000 px – ширина попапа 310 px, высота 212.

    Делаем своё расширение для браузера за 10 минут

    В конце 2020 года мы делали проект со снежинками — писали специальный скрипт, который запускал падающий снег на сайтах. Если бы мы хотели сделать такой снег на любом своём сайте, это не составило бы труда: добавляешь скрипт в код страницы, и готово.

    А вот на чужих сайтах была проблема. Скрипт нужно было вставлять через консоль. А если на сайте была настроена политика безопасности, которая запрещает запуск внешних скриптов, то магия не срабатывала.

    Сегодня мы это исправим — сделаем расширение для браузера, которое может запускать любой скрипт на любой странице. Мы охватим принцип, на основе которого вы сможете сделать собственные расширения, в том числе намного более сложные.

    �� Что такое расширение

    Расширение для Chrome — это небольшая программа, которая выполняется внутри браузера и помогает расширить возможности сайтов. Сила расширения в том, что оно может выполняться прямо из меню браузера и не зависит от политик безопасности.

    Примеры того, что может сделать расширение:

    • Сохранить ваши пароли и другие личные данные,
    • Выдрать из страницы скрытые данные (например, ссылку на скачивание музыки).
    • Менять что-то на странице, например, отключать рекламу, переводить текст, удалять ненужное.
    • Собирать статистику вашей работы в интернете.
    • Подключаться к другим сервисам (почте, чатам, файлообменникам) и взаимодействовать с ними из браузера.

    В этой статье

    Мы сделаем самое простое расширение для браузера Chrome, которое позволит запускать скрипт со снежинками на любом сайте, независимо от настроенной политики безопасности. Для этого воспользуемся официальным руководством Google по созданию расширений.

    Манифест

    В каждом расширении для браузера должен быть манифест — документ, в котором написано:

    • как называется расширение;
    • к чему расширение может получить доступ;
    • какие скрипты будут работать в фоне;
    • как должна выглядеть иконка расширения;
    • что показать или что выполнить, когда пользователь нажмёт на иконку расширения.

    Манифест задаёт общие правила для всего расширения, поэтому манифест — единственный обязательный компонент. Можно обойтись без иконок и скриптов, но манифест обязательно должен быть.Каждый манифест хранится в файле manifest.json — создадим пустой файл с таким именем и напишем внутри такое:

    «name»: «Запускаем снежинки на любом сайте»,
    «description»: «Проект журнала Код»,
    «version»: «1.0»,
    «manifest_version»: 3
    >

    Первые две строчки — это название и подробное описание расширения. Третья отвечает за номер версии расширения, а последняя говорит браузеру, какая версия манифеста используется в описании. На момент выхода статьи в феврале 2021 года используется третья версия.

    Сохраняем файл и всё, расширение готово. Оно ничего не умеет, ничего не делает, зато мы уже можем добавить его в браузер. Для этого запускаем Хром и в адресной строке пишем:

    Мы попадаем на страницу, которая нам покажет все установленные расширения:

    Делаем своё расширение для браузера за 10 минут

    Чтобы добавить своё расширение, в правом верхнем углу включаем режим разработчика, а затем нажимаем «Загрузить распакованное расширение»:

    Делаем своё расширение для браузера за 10 минут

    Теперь выбираем папку, в которой лежит наш манифест:

    Делаем своё расширение для браузера за 10 минут

    Отлично, мы только что добавили в браузер новое расширение:

    Делаем своё расширение для браузера за 10 минут

    Теперь мы можем обновлять наш манифест, класть в ту же папку дополнительные файлы, а для обновления в браузере достаточно будет нажать на круглую стрелку на карточке расширения.

    Чтобы было проще работать и тестировать расширение, закрепим его на панели браузера:

    Делаем своё расширение для браузера за 10 минут

    Иконки

    У расширения есть две иконки, которыми мы можем управлять:

    1. Картинка в карточке расширения на странице настроек.
    2. Иконка на панели браузера.

    Чтобы не рисовать всё с нуля, скачаем папку с иконками из того же руководства Google и положим её в ту же папку, что и манифест:

    Теперь добавим иконки в манифест. За картинку в карточке отвечает блок icon, а за иконку на панели — блок action. Разные размеры картинки нужны для того, чтобы на разных мониторах с любой плотностью пикселей иконки выглядели хорошо:

     < "name": "Запускаем снежинки на любом сайте", "description": "Проект журнала Код", "version": "1.0", "manifest_version": 3, "action": < "default_icon": < "16": "/images/get_started16.png", "32": "/images/get_started32.png", "48": "/images/get_started48.png", "128": "/images/get_started128.png" >>, "icons": < "16": "/images/get_started16.png", "32": "/images/get_started32.png", "48": "/images/get_started48.png", "128": "/images/get_started128.png" >>

    Сохраняем манифест, обновляем расширение на странице настроек и смотрим результат:

    Добавляем иконки в манифест

    Настраиваем разрешения

    Разрешения — это то, что браузер позволяет делать расширению со страницами и с их содержимым. Для запуска снежинок нам нужно сделать две вещи:

    1. Понять, какая вкладка сейчас активная, чтобы запустить снежинки именно на ней.
    2. Запустить наш скрипт со снежинками.

    Чтобы получить доступ к активной вкладке и к запуску скриптов, добавим в манифест такую строку:

    «permissions»: [«activeTab», «scripting»],

    Показываем меню

    Если мы сейчас нажмём на иконку расширения на панели браузера, то ничего не призойдёт, потому что мы ничего не запрограммировали. Исправим это — сделаем так, чтобы при нажатии расширение показывало кнопку запуска. Когда расширение будет уметь больше, вместо одной кнопки можно будет показать целое меню.

    Чтобы сделать всплывающее меню, добавим в манифест в раздел action такую строку:

    Она означает, что при нажатии на иконку мы увидим рядом с ней мини-страничку, на которой что-то будет.Создадим в той же папке расширения файл popup.html и добавим в него такой код:

         /* задаём размеры кнопки и размер текста на кнопке */ button   

    Чтобы браузер не ругался, что у нас нет файла popup.js , создадим пустой файл с таким названием и положим его в ту же папку:

    Показываем меню расширения

    Сохраняем манифест, обновляем его на странице настроек и видим, что у нашего расширения появилось меню с кнопкой:

    Показываем меню расширения

    Запускаем снежинки

    Вся магия будет происходить в файле popup.js — откроем его и добавим такой код:

    // получаем доступ к кнопке let snow = document.getElementById("snow"); // когда кнопка нажата — находим активную вкладку и запускаем нужную функцию snow.addEventListener("click", async () => < // получаем доступ к активной вкладке let [tab] = await chrome.tabs.query(< active: true, currentWindow: true >); // выполняем скрипт chrome.scripting.executeScript(< // скрипт будет выполняться во вкладке, которую нашли на предыдущем этапе target: < tabId: tab.id >, // вызываем функцию, в которой лежит запуск снежинок function: snowFall, >); >); // запускаем снег function snowFall()

    Последнее, что нам осталось сделать, — положить в функцию snowFall() полный код скрипта из проекта со снежинками и сохранить файл.

    Проверка

    В прошлый раз мы не смогли запустить скрипт на любой странице Яндекса — мешала политика безопасности. Теперь всё работает:

    Проверяем расширение

    Скачать упакованное расширение. Перед установкой его нужно распаковать в любую папку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *