Урок 11

Урок 11

УРОК 11


Новые окна

Это первый из двух уроков, посвященных открытию новых окон. Сначала вы узнаете, как через команды Javascript открыть новый документ HTML в другом окне. Второй урок научит вас, как с помощью функции поместить две разные страницы в одном документе.

Начнем с основ.

Скрипт

<SCRIPT LANGUAGE=»javascript»>

window.open(‘les1.htm’, ‘joe’, config=’height=300,width=300′)
self.name=»main window»

</SCRIPT>

Результат

Вы видели, как действует скрипт, когда открывали страницу. Всплыло второе окно с 1 Уроком данного учебника.

Разбор скрипта

Расположение на странице

Начнем с расположения скрипта на странице. До сих пор я говорил, что лучше помещать скрипты повыше, чтобы они первыми загружались в память компьютера и начинали работать без задержки. Когда вы имеете дело с функцией, скрипт помещается между командами <HEAD>. Здесь я хочу сделать вам другое предложение.

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

Это только мое мнение. На самом деле можно ставить скрипт куда угодно, и он будет работать. Просто я считаю, что чем позже откроется новое окно, тем лучше для вас и для посетителей ваших страниц.

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

window.open
Нельзя сказать яснее, чем это: window (окно) — объект, a open (открыть) — метод, который на него воздействует.

Конфигурация нового окна
Информация об этом находится в круглых скобках (это называется примером, помните?) Вот схема, которой вы будете следовать:

(‘URL документа в новом окне‘, ‘Название нового окна’, config=’параметры нового окна’)

Сегодняшний образец:
(‘opened.html’,’joe’,config=’height=300,width=300′)

  • opened.html — это URL страницы, которая появится в новом окне.
    Если страница располагается на другом сервере, то добавьте http:// и так далее.
  • joe — название нового окна. Через минуту я объясню вам, для чего оно нужно. config= указывает, что следующие команды относятся к конфигурации нового окна.

Команды конфигурации
Они сообщают, что новое окно будет размером 300 на 300 пикселей.

Кстати, всегда делайте ваше окно немножко больше, чем нужно вам. Может быть, у кого-то другое разрешение экрана, и ваши размеры окна ему не годятся.

Обратите внимание, что команды height (высота) и width (ширина) разделены только запятой без пробелов, а значения поставлены в одинарные кавычки, так как эти два элемента являются подкомандами config. Пробел для браузера означает конец команды. Ошибка.
Есть множество подкоманд для команды config. Про высоту и ширину вы уже знаете, они определяются в пикселях. Остальные подкоманды употребляются со словами «yes» или «no» в зависимости от того, нужны ли в новом окне эти элементы. (Можно ставить «1» вместо «да» и «0» вместо «нет».) Помните, никаких пробелов между подкомандами и одинарные кавычки.

  • toolbar= отвечает за наличие панели инструментов c кнопками НАЗАД, ВПЕРЕД, СТОП и т.д.
  • menubar= отвечает за наличие строки меню с элементами ФАЙЛ, ПРАВКА, ВИД и т.д.
  • scrollbars= отвечает за наличие полосы прокрутки. Я никогда не делаю новое окно с полосой прокрутки. По-моему, это убивает весь эффект.
  • resizable= указывает, сможет ли пользователь изменить размер окна по своему желанию. Я вас умоляю, никогда не ставьте здесь «нет», если только это не художественная инсталляция!
  • location= отвечает за наличие адресной строки, где виден URL страницы.
  • status= отвечает за наличие строки состояния.

От строки с заголовком вы не избавитесь никогда, хотите вы этого или нет.

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

Тэги в новом окне
Всплывающее новое окно — это не просто рамка для страницы.
Как видите, я поставил две ссылки. Первая открывает домашнюю страницу HTML Goodies в главном окне. Вот как это получается:

<A HREF=»http://www.htmlgoodies.com» TARGET=»main window»></A>

У большого окна есть имя, «main window» (главное). Вот почему я называл его главным на протяжении всего урока. В скрипте это обозначено строкой self.name=»main window». Добавляем в ссылку HREF TARGET=»—» (цель) и указание на main window.

А если надо, чтобы страница загружалась в маленьком окошке? Что ж, как оно называется? «joe». Помните? Просто нужно написать «joe» после команды target.

С помощью многократных команд window.open можно вызывать многократные окна. Только следите за тем, чтобы у каждого нового окна было свое имя. Можете связывать окна ссылками при условии, что правильно указываете имена окон в команде target.

Закрыть окно
Вторая ссылка нового окна закрыла его. Вот как это сделано:

<A HREF=»»>Щелкните, чтобы закрыть</A>

Это обычная ссылка HREF, которая никуда не ведет. Видите пустые кавычки? Команда закрывает окно и никуда не ведет.
self (само, себя) — это свойство может относиться к любому объекту. В нашем случае это свойство окна. Команда close (закрыть) закрывает окно.

Еще кое-что
Допустим, вы хотите открыть окно по команде, а не когда пользователь заходит на страницу. Вот как это можно сделать:

<A HREF=»les11.htm»>Щелкните, чтобы открыть ‘joe'</A>

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

Щелкните, чтобы открыть ‘joe’

Это ссылка HREF, которая направлена на самое себя. Команда onClick делает работу, а параметры содержатся в скобках().

В следующем Уроке мы поговорим о том, как из одной страницы сделать две.

Ваше задание

Я не показал вам в действии все доступные характеристики окна, так что в качестве задания напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300 пикселей и с двумя ссылками:

  • Одна откроет новую страницу в главном окне.
  • Вторая откроет новую страницу в том же окне.
  • Страница, которая откроется в том же маленьком окне, должна содержать ссылку, закрывающую окно.

Возможный ответ здесь

<<назад на урок 10>>

<<Содержание>>

<<вперед на урок 12>>

Сайт создан в системе uCoz

External Links in New Window / New Tab — Плагин для WordPress

  • Детали
  • Отзывы
  • Установка
  • Разработка

Поддержка

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

Плагин создает код, полностью соответствующий стандарту XHTML, и оптимизирован для поисковых систем (SEO).
Это делается с помощью функции JavaScript window.open(). Она добавляет на страницу всего несколько JavaScript строк и не требует никаких внешних библиотек, таких как jQuery.

Большинство других плагинов выполняют взлом, изменяя параметр target (т.е. <a href="http://somewhere.example" target="_blank">). Этот метод не является строго совместимым с XHTML.
Этот плагин обрабатывает ссылки на стороне клиента, что позволяет поисковым системам правильно следовать по ссылкам. Кроме того, если браузер не поддерживает JavaScript, плагин просто неактивен и не приводит к каким-либо ошибкам.

If you need a more advanced plugin, with more options try our free WP External Links plugin.

Благодарности
Вдохновлены плагином Zap_NewWindow от Tom Köhler.
На баннере фото от Monja Da Riva.

Переводы
Датский — Kristian Risager Larsen
Голландский — Paul Staring
Литовский — Vincent G
Будем признательны за другие переводы!

Известные ошибки
Плагин конфликтует с другими плагинами, которые изменяют атрибут ссылок «onClick».

Оригинальный разработчик
Kristian Risager Larsen — kezze.dk

  • External links settings
  1. Скопируйте плагин в /wp-content/plugins/
  2. Активируйте плагин.
  3. В конце концов, измените настройки в Настройки-> Внешние ссылки.

Me ha sorprendido gratamente lo sencillo y eficiente que es. Muchas veces los clientes que editan contenidos se olvidan de linkar correctamente los enlaces externos… así queda resuelto. Es genial

Nice little plugin solve a problem faced by many bloggers like me.. absolutely recommended.

Appena installato il plugin, senza alcun intervento da parte mia, ha fatto esattamente ciò che prometteva, che poi era quello che mi serviva: aprire semplicemente i collegamenti esterni in nuove schede, senza lasciare il sito. ..

I was struggling with this for months, due a copy protection plugin my readers cannot open new tabs from our blog. This plugin solved this issue. Works like a charm! Thank you guys!

Simple but important feature for our blog. Thank you guys!

Nice and easy to work thanks!

Посмотреть все 69 отзывов

«External Links in New Window / New Tab» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

  • WebFactory

«External Links in New Window / New Tab» переведён на 6 языков. Благодарим переводчиков за их работу.

Перевести «External Links in New Window / New Tab» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

1.44
  • 2022-11-22
  • minor security fixes
1.
43
  • 2022-05-06
  • security fix reported by Automattic
1.42
  • 2021-01-30
  • добавлено выпадающее меню
1.41
  • 2020-10-21
  • незначительное обновление
1.4
  • 2019-08-26
  • WebFactory взял на себя разработку
  • незначительные исправления
  • 40 000 установок; 178 750 загрузок
1.3.3

Проверена совместимость с WordPress 5.0

1.3.2

Обновлено: Датский перевод

1.3.1

Проверена совместимость с WordPress 4.0
Добавлено: Логотип плагина для WordPress 4.0
Добавлено: Голландский перевод.

1.3

Добавлено: Возможность форсировать и игнорировать определенные пользователем строки в URL-адресах. Эта функция была запрошена.
Добавлено: литовский и датский перевод.

1.2

Добавлено: Готовность к переводу.

1.1.1

Исправлено: Предупреждение об устаревании (Спасибо boo1865)

1.1.0

Изменено: Лучшая практика для открытия ссылок. Плагин теперь использует onClick атрибут вместо того, чтобы писать JavaScript непосредственно в href атрибуте. Это позволяет пользователям право нажать на ссылку и открыть в новом окне/вкладке, сохранить цель и т.д.

1.0.1

Исправлено: удаляет целевой атрибут из ссылок вместо установки атрибута в значение null. (Спасибо crashnet)

1.0

Исправлено: Благодарность Tom Köhler (Кодировка).
Исправлено: Ссылки.

0.9

Первая версия.

Мета

  • Версия: 1.44
  • Обновление: 7 дней назад
  • Активных установок: 40 000+
  • Версия WordPress: 4.0 или выше
  • Совместим вплоть до: 6.2
  • Версия PHP: 5.2 или выше
  • Языки:

    Chinese (Taiwan), Dutch, English (US), German, Lithuanian, Russian и Vietnamese.

    Перевести на ваш язык

  • Метки:

    external linkslinksnew tabnew windowtarget blank

  • Дополнительно

Оценки

Посмотреть все

  • 5 звёзд 60
  • 4 звезды 0
  • 3 звезды 0
  • 2 звезды 3
  • 1 звезда 6

Войдите, чтобы оставить отзыв.

Участники

  • WebFactory

Поддержка

Решено проблем за последние 2 месяца:

1 из 1

Перейти в форум поддержки

Как заставить HTML открывать гиперссылку в другом окне или вкладке?

спросил

Изменено 4 года, 1 месяц назад

Просмотрено 230 тысяч раз

Это строка для гиперссылки в HTML:

  starfall.com/">Звездопад

Таким образом, если я нажму на «Звездопад», мой браузер — я использую FireFox — перенесет меня на эту новую страницу, и содержимое моего окна изменится. Интересно, а как в HTML сделать так, чтобы новая страница открывалась в новом окне, а не менялась предыдущая? Есть ли такой способ в HTML?

И если да, то есть ли способ открыть запрошенную страницу в другой вкладке (не в другом окне) моего браузера?

  • html
  • окно
  • гиперссылка
 Звездопад

Откроется ли он во вкладке или в другом окне, зависит от того, как пользователь настроил свой браузер.

2

Самый простой способ — добавить целевой тег.

 Звездопад

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

3

использовать target="_blank"

Звездопад

0

Вы должны добавить

 target="_blank"

нравится

 Звездопад

Атрибут target — лучший способ сделать это.

откроет его в новой вкладке или окне. Что касается, это зависит от настроек пользователя.

по умолчанию. Это заставляет страницу открываться на той же вкладке (или в iframe, если вы имеете дело с этим).
Следующие два хороши, только если вы имеете дело с iframe.

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

откроет ссылку во вкладке, сколько бы фреймов она не прошла.

1

цель = _blank будет открыта в новой вкладке или окнах в зависимости от настроек браузера.

Чтобы принудительно открыть новое окно, используйте javascript по щелчку, необходимы все три части. URL, имя, ширину и высоту окна, иначе он просто откроется в новой вкладке.

 Звездопад

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

При этом ВСЕ ссылки на вашей странице будут открываться в новой вкладке.

Поскольку Интернет развивается быстро, некоторые вещи со временем меняются. Из соображений безопасности вы можете использовать атрибут rel="noopener" в сочетании с вашим target="_blank" .

Как указано в документации Google Dev, другая страница может получить доступ к вашему объекту окна с помощью свойство window. opener . Теперь ваша внешняя ссылка должна выглядеть так:

 Starfall

1

пример ниже с target="_blank" работает для Safari и Mozilla

Использование target="new" работало для Chrome

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как открывать внешние ссылки в новом окне или вкладке с помощью WordPress

Хотите открывать внешние ссылки из сообщений блога в новом окне или вкладке браузера?

Открытие внешних ссылок в новом окне позволяет вашим пользователям переходить по ссылке, не покидая ваш сайт. Это приводит к более высокой вовлеченности пользователей, поскольку они проводят больше времени на вашем сайте.

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

Зачем открывать внешние ссылки в новом окне или вкладке?

Внешние ссылки — это ссылки на веб-сайты, которыми вы не владеете и не контролируете. Обычно, если вы добавите ссылку на внешний веб-сайт, ваши посетители просто покинут ваш сайт, нажав на ссылку.

Хотя некоторые эксперты по пользовательскому опыту говорят, что внешние ссылки не следует открывать в новом окне или вкладке, мы с этим не согласны.

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

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

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

При этом давайте посмотрим, как легко открывать внешние ссылки в новом окне или вкладке в WordPress. Мы рассмотрим различные методы, чтобы вы могли выбрать тот, который лучше всего подходит вам.

  1. Открытие внешних ссылок в новой вкладке с помощью редактора блоков
  2. Открытие внешних ссылок в новой вкладке с помощью классического редактора
  3. Открытие внешних ссылок в новой вкладке с помощью HTML-кода
  4. Открытие ссылок меню навигации в новой вкладке
  5. Автоматически Открытие всех внешних ссылок в новой вкладке с помощью плагина
Открытие внешних ссылок в новой вкладке с помощью редактора блоков

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

Просто отредактируйте сообщение в блоге или страницу, на которую вы хотите добавить внешнюю ссылку. Затем выберите текст, который вы хотите связать, и нажмите кнопку «Связать». Вы также можете нажать сочетание клавиш CTRL+K в Windows или Command+K в Mac.

Появится всплывающее окно для вставки ссылки. Просто введите ссылку и нажмите Enter. После этого вам нужно переключить опцию «Открыть в новой вкладке» в положение «Вкл.».

Теперь ссылка откроется в новой вкладке.

Открытие внешних ссылок в новой вкладке с помощью классического редактора

Если вы все еще используете классический редактор, мы рекомендуем вам начать использовать новый редактор. Он современный, быстрый и включает в себя множество новых функций, которые вы упускаете.

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

Во-первых, вам нужно отредактировать пост или страницу, куда вы хотите добавить ссылку. Затем выберите текст, который вы хотите связать (также известный как якорный текст), а затем нажмите кнопку «Вставить/отредактировать ссылку».

Появится всплывающее окно, где вы можете добавить свою внешнюю ссылку.

После этого нажмите на значок шестеренки рядом с ним. Это вызовет всплывающее окно расширенной вставки ссылки.

Здесь вам нужно установить флажок «Открыть ссылку в новой вкладке». После этого вы должны нажать кнопку «Обновить» внизу, чтобы добавить свою ссылку.

Открытие внешних ссылок в новой вкладке с использованием HTML-кода

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

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

  com" target="_blank" rel="noopener">Текст ссылки

Параметр target="_blank" в этом коде указывает браузерам открывать ссылку в новом окне или вкладке. Просто замените «example.com» на URL-адрес внешней ссылки, а «Текст ссылки» на текст привязки, который вы хотите использовать.

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

Открытие ссылок меню навигации в новой вкладке для традиционных тем

Чтобы открыть исходящие ссылки меню в новой вкладке, перейдите к Внешний вид » Меню из области администрирования WordPress.

Затем нажмите кнопку «Параметры экрана» в правом верхнем углу экрана.

Когда вы нажмете кнопку, вы увидите больше вариантов.

Проверьте параметр «Цель ссылки» в разделе «Показать дополнительные свойства меню». Кнопка «Меню».

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

Когда вы закончите, нажмите кнопку «Сохранить меню» внизу.

Открытие ссылок меню навигации в новой вкладке для тем блоков

Если вы используете новую тему блока, вам нужно будет перейти к Внешний вид » Темы и использовать полноэкранный редактор, чтобы открыть исходящие ссылки меню в новой вкладке.

Вам нужно щелкнуть область заголовка в верхней части страницы, и заголовок будет выбран. Затем щелкните область навигации слева от меню. Меню будет выбрано, и вы должны увидеть знак «+» в конце меню, где вы можете добавить новую ссылку.

Совет: Выбор блоков в полноэкранном редакторе может быть сложным, поэтому многим пользователям проще использовать представление списка. Просто щелкните значок в верхней части экрана, затем найдите и выберите блок навигации. Он может быть вложен в другие блоки, такие как «Заголовок» и «Группа».

Теперь вам нужно щелкнуть значок «+», чтобы открыть всплывающее окно, в котором вы можете добавить ссылку. Введите URL-адрес в поле вверху и убедитесь, что вы переключили «Открыть в новой вкладке» в положение «Вкл.». Затем нажмите значок «Отправить» рядом с URL-адресом, чтобы сохранить настройки.

Сделав это, не забудьте нажать кнопку «Сохранить» в верхней части экрана.

Автоматическое открытие всех внешних ссылок в новой вкладке с помощью подключаемого модуля

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

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

Во-первых, вам необходимо установить и активировать плагин «Открыть внешние ссылки в новом окне».

No related posts.