Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> ОКНА и ФРЕЙМЫ, Учимся работать 
:(
    Опции темы
Aliance
  Дата 5.3.2005, 23:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Генерируемые новые ОКНА


ПРЕДИСЛОВИЕ.

Не путать с популярной программой «Окна» smile

ВСТУПЛЕНИЕ.

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

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

ЧЕГО ДЕЛАТЬ НЕЛЬЗЯ!!! (своеобразный ЧаВо, всем новичкам перечитать несколько раз)
  • Изменение параметров главного окна. Нельзя добавлять или убирать элементы оформления
    главного окна - строку меню, полосы прокрутки, строку состояния, панель инструментов и т.п.
    *Исключение состовляет NN4+, где сценарии могут делать данные операции, но только с
    разрешения пользователя!
  • Закрытия родительского окна из сценариев в дочернем. Если попытаться вызвать
    метод opener.close(), пользователь увидит предупреждение для разрешения на данную операцию.
  • Изменение настроек браузера. Опять же, с разрешения пользователя это можно сделать только в NN4+
  • Перехват активации (или срабатывания) кнопок браузера. Операции с кнопками браузера: вперед/назад, печать ...
  • Изменение или удаление записей в Избранном (закладки). Исключение состовляет возможность IE
    window.external.addFavorite(), но опять же следует получить разрешение у пользователя.
  • Изменения адреса страницы. Нельзя изменить адрес, можно только загружить новую страницу методом location.href
  • Доступ к свойствам документа с других доменов.
  • Закрытие окон, открытых другими сценариями.
НАЧАЛО.

Для создания нового окна используется метод window.open(), аргументами которого являются: URL
загружаемой страницы, имя окна, параметры окна и четвертый аргумент* (все четыре - необязательные.)
(Четвертый аргумент open() полезен, только если второй аргумент предствавляет собой имя уже существующего окна. Этот 4ый аргумент - boolean, определяющее, должен ли URL, указанный в первом аргументе, заменять текущую запись в истории просмотра окна (true), или должна быть создана новая запись (false) - последнее выбирается по умолчанию.)

Вот все параметры окна:

Атрибут NN IE Описание
alwaysLowered 4 - Окно всегда над другими
alwaysRised 4 - Окно всегда под другими
channelMode - 4 Показывать содержимое на панели каналов
copyhistory 2 - Перенести новое окно в историю из текущего
dependent 4 - Дочернее окно закроется при закрытии родительского
directories 2 3 Показать в новом окне кнопки папок
fullscreen - 4 Не отображать заголовой и меню
height 2 3 Размер содержимого окна в пикселях
hotkeys 4 - Отключить клав. сокращения (кроме Quit и Sequrity Info)
innerHeight 4 - Высота содержимого.
innerWidth 4 - Ширина содержимого.
left 6 4 Смещение левой границы окна относительно границы экрана
location 2 3 Отображать поле адреса
menubar 2 3 Отображать строку состояния
outerHeight 4 - Наружная ширина окна
outerWidth 4 - Наружная ширина окна
resizeble 2 3 Разрешать польз. менять размер окна
screenX 4 - Смещение левой границы окна от границы экрана
screenY 4 - Смещение верхней границы окна от границы экрана
scrollbars 2 3 Отображать полосы прокрутки
status 2 3 Отображать строку состояни
titlebar 4 - Отображать строку меню.
toolbar 2 3 Отображать панель инструментов
top 6 4 Смещение верхней границы окна относительно границы экрана
width 2 3 Ширина содержимого.
z-lock 4 - Новое окно фикс. под прочими окнами.

Пример:
Код

window.open("http://forum.vingrad.ru","VinFor","status=no,location=1");


Небольшая подсказка: нажав на F11 в окне без адресной строки, Вы развернете его на полную, увидев адрес и панель инструментов

ПРАКТИКА.

Для управления размерами окна есть 2 метода объекта window - resizeBy() и resizeTo()
Для перемещения окна есть 2 метода объекта window - moveBy() и moveTo()

Примеры, для развертывания окна на полную используем такой код:

Код

function maximizeWindow() {
    var offset = (navigator.userAgent.indexOf("Mac") != -1 || 
                  navigator.userAgent.indexOf("Gecko") != -1 || 
                  navigator.appName.indexOf("Netscape") != -1) ? 0 : 4;
    window.moveTo(-offset, -offset);
    window.resizeTo(screen.availWidth + (2 * offset), screen.availHeight + (2 * offset));
}


Часто требуется центрировать окно по центру экрана, для этой задачи есть простое решение:

Код

var myWindow;
function openCenteredWindow(url) {
    var width = 400;
    var height = 300;
    var left = parseInt((screen.availWidth/2) - (width/2));
    var top = parseInt((screen.availHeight/2) - (height/2));
    var windowFeatures = "width=" + width + ",height=" + height + 
        ",status,resizable,left=" + left + ",top=" + top + 
        "screenX=" + left + ",screenY=" + top;
    myWindow = window.open(url, "subWind", windowFeatures);
}


Вывод окна на передний план:

Код

var newWindow;
function makeNewWindow(url) {
    if (!newWindow || newWindow.closed) {
        newWindow = window.open(url,"subwind","status,height=200,width=300");
    } else {
        // окно уже существсует => просто передаем ему фокус
        newWindow.focus();
    }
}


ОБМЕН ИНФОРМАЦИИ С РОДИЛЬНЫМ ОКНОМ.

Например, у Вас есть форма регистрации, и вы хотите вывести все заполненые юзером поля в новое окно для их просмотра, тогда делаем это так (данная функция должна находиться в дочернем окне, там же должна находиться форма с именем f11 и текстовое поле с именем name, соотв. в главном окне - форма f1 и поле nameMain):

Код

document.forms["f11"].name.value = opener.document.forms["f1"].nameMain.value;


Пример использования "приветствия от юзера" с помощью модального окна:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Привествие</title>
<script type="text/javascript">
function openDialog(form) {
    var result = window.showModalDialog("hello.html", form, "dialogWidth:300px; dialogHeight:201px; center:yes");
}
</script>
</head>
<body>

<form name="sample" action="#" onsubmit="return false">
Имя: <input name="yourName" type="text" />
<input type="button" value="Послать" onclick="openDialog(this.form)" />
</form>
</body>
</html>


hello.html
Код

<html>
<head>
<title>Приветствие в МОДАЛЬНОМ ОКНЕ (IE only)</title>
</head>
<body>
<script type="text/javascript">
document.write("Вам привет от " + window.dialogArguments.yourName.value + "!");
</script>
</body>
</html>


Это сообщение отредактировал(а) Aliance - 21.3.2005, 01:44
PM MAIL WWW ICQ Skype   Вверх
Sardar
Дата 9.3.2005, 03:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 2
Всего: 317



Заметим что параметры:
Цитата(Aliance @ 5.3.2005, 22:12)
alwaysLowered 4
alwaysRised

доступны только из подписанных скриптов, другими словами нужен сертификат с подтверждением юзера.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Aliance
Дата 10.3.2005, 21:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Sardar
Не только, innerHeight/Width, outerHeight/Width, screenX/Y, z-lock и titlebar.

Это сообщение отредактировал(а) Aliance - 15.3.2005, 21:40
PM MAIL WWW ICQ Skype   Вверх
Aliance
Дата 19.3.2005, 19:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



ФРЕЙМЫ

ВСТУПЛЕНИЕ.
Реализации стандарта XHTML исключают фреймы из команд разметки документа, также ссылки и формы не могут иметь атрибут target (если придерживаться этому стандарту).
Хотя спецификация XHTML и включает в себя версию-исключение, включающую в себя фреймы (XFrames).
В тоже времемя, любой программист, не приследующий цель соответствия стандарту XHTML, может смело использовать фреймы, т.к. практически любой браузер их поддерживает.

Изначально каждый фрейм рассматривался как окно (все таки, фрейм, как и окно, является контейнером для документа), поэтому большинство свойств и методов, имеющихся у обекта window, присутствуют и у фрейма.



ЧЕГО ДЕЛАТЬ НЕЛЬЗЯ!!!
  • Получить доступ к свойствам документа из фреймов, доставленных с других серверов или домена. Политика безопастности не позволит данную операцию.
  • Изменить содержимое поля адреса. Т.к. URL страницы показывает страницу, в которой задан набор фреймов, а не текущую, многие пытаются вывести именно ее. Но эти попытки безуспешны smile
  • Сформировать запись в "Избранных", соотв. данной структуре фреймов!
    Хотя можно восстановить структуру фреймов, как это сделать будет описано чуть позже.
У фреймов своя специфическая иерархия, следующая картинка отоброзит, как происходит обращение фреймов друг к другу в HTML документе с двойной вложенностью фреймов.
(т.к. картинка нарисована мною "от руки", некоторые надписи могут быть непонятны, если что - обращайтесь, разъясню):

--Resize_Images_Alt_Text--

Обращаться к фрейму можно несколькими способами, вот самые распространненые:
Код

top.frames[i] // где 'i' - индекс фреймов, отсчет начинается с нуля (0), с верху вниз, как объявленно в HTML коде
top.frames["имя_фрейма"] // ...frame name="имя_фрейма" src=""...


Примеры:

Обращение к глобальной переменной myVar, объявленной в главном документе, выглядит так:
Код

parent.myVar
// или
top.myVar


Переход на опр. страницу:
Код

// канечно, можно сдлеать в HTML`е - <a href="" target="имя_фрейма">перейти</a>
// но мы сделаем умнее, с помощью JavaScript`а ;-)
parent.имя_фрейма.location.href = 'имя_страницы.html';


Еще очень полезной может оказаться следующая функция (она экономит время при смене дизайна)
Код

// для ее работы - нужно, чтобы необходим. ссылки имели аттрибут class="link"
function setTargets () {
 for (var i = 0; i < document.links.length; i++) {
   if (document.links.className == "link") {
      document.links.target = "имя_фрейма";
   }
 }
}


Сценарий во фрейме может прокрутить содержимое второго фрейма в начало страницы так:
Код

parent.frames["имя_второго_фрейма"].scrollTo(0,0);
// с там же успехом сценарий может обратиться к любой другой функции, описанной во втором фрейме


Сценарий может сделать ссылку на любой объект:
Код

// так, в обычном документе ссылку на input с id="qwe" вы бы сделали бы так:
// var elem = document.getElementById("qwe");
// Но если этот элемент лежит в соседнем фрейме, то нужно делать это так:
var elem = parent.frames["имя_соседнего_фрейма"].document.getElementById("qwe");

NB: нужно только не забыть сделать ссылку на документ после ссылки на нужный фрейм

Чтобы получить ссылку на документ фрейма есть 2 специальных свойства фреймов: contentDocument (W3C DOM) и contentWindow (IE DOM), и если нужна совместимость этих моделей, то можно написать простую функцию получения непосредственно документа:
Код

function getFrameDocument (fram) {
 var d = (fram.contentDocument) ? fram.contentDocument : ((fram.contentWindow) ? fram.contentWindow.document : null);
 return d;
}


Сценарий может динамически сгенерировать контекст фрейма:
Код

<HTML>
<head>
<script type="text/javascript">
<!--
function createFrame() {
   return "<html><body><h1>Это динамически-сгенерированный фрейм</h1></body></html>";
}
// -->
</script>
</head>
<frameset>
 <frame name="frame1" id="frame1" src="about:blank">
 <frame name="frame2" id="frame2" src="javascript:parent.createFrame()">
</frameset>
</HTML>


Ну и еще одна функция для любителей самообороны 8))
Код

// функция защиты от попадания данной страницы в набор фреймов
...
if (top != self) {
   top.location.href = location.href;
}
...


Это сообщение отредактировал(а) Aliance - 19.3.2005, 20:26
PM MAIL WWW ICQ Skype   Вверх
Aliance
Дата 20.3.2005, 00:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Вот полезный код, динамически изменяющий ширину навигационного фрейма: смотреть
PM MAIL WWW ICQ Skype   Вверх
Aliance
Дата 26.8.2005, 09:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Картинка

Присоединённый файл ( Кол-во скачиваний: 212 )
Присоединённый файл  frames.jpg 59,91 Kb
PM MAIL WWW ICQ Skype   Вверх
butionok
Дата 9.9.2005, 19:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: нет
Всего: 3



Цитата(Aliance @ 19.3.2005, 19:41)
Сценарий может динамически сгенерировать контекст фрейма:
Код

<HTML>
<head>
<script type="text/javascript">
<!--
function createFrame() {
   return "<html><body><h1>Это динамически-сгенерированный фрейм</h1></body></html>";
}
// -->
</script>
</head>
<frameset>
 <frame name="frame1" id="frame1" src="about:blank">
 <frame name="frame2" id="frame2" src="javascript:parent.createFrame()">
</frameset>
</HTML>

Решил применить.... И оказалось, что нормально работает только в IE

NN и Firefox ругаются, но показывают

Error: uncaught exception: Permission denied to get property Window.createFrame

Opera ругается и не показывает smile

javascript:parent.createFrame()
Javascript URL thread: "javascript:parent.createFrame()"
Error:
name: ReferenceError
message: Security error: attempted to read protected variable

Может кто знает альтернативный метод динамического генерирования фреймов, который будет работать во всех броузерах?
--------------------
Ненавижу убогую Оперу.
PM MAIL ICQ   Вверх
Sardar
Дата 9.9.2005, 23:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 2
Всего: 317



У меня код в ИЕ(6.0 SP2) не заработал.
Цитата(butionok @ 9.9.2005, 18:21)
Может кто знает альтернативный метод динамического генерирования фреймов, который будет работать во всех броузерах?

Сними фрейм по ID, отдай этой функции:
Код
function getIframeDOMDocument(ifr) {
  return (ifr.contentDocument) ? ifr.contentDocument: ((ifr.contentWindow) ? ifr.contentWindow.document : ifr.document);
}

Получишь document, далее либо write, либо DOM'овскими методами.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Aliance
Дата 10.9.2005, 14:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Цитата(Sardar @ 10.9.2005, 00:58)
У меня код в ИЕ(6.0 SP2) не заработал.

У меня в том же все прекрасно работает smile Чудеса smile
PM MAIL WWW ICQ Skype   Вверх
Гость_12345
Дата 22.11.2005, 22:02 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











Проверил в 3 браузерах, Опера 7.54 наиболее кривая - никакими средствами не исполняет загрузку в фрейм, даже после создания:
Код
<html><head>
<script>function createFrame() {
    top.frame1.document.body.innerHTML='<h1>This is <b>3nd</b> dynamically generated frame</h1>';
    return "<html><body><h1>This is dynamically generated frame</h1></body></html>";
}setTimeout('top.createFrame()',1999);</script>
</head>
<frameset cols="50%,50%"  onL oad=top.createFrame()>
 <frame name="frame1" id="frame11" src="javascript:'<body on Load=top.createFrame()>12345</body>'">
 <frame name="frame2" id="frame21" src="javascript:Math.sin(56789)">
</frameset>
</HTML>
, что странно. Работает лишь на статическом контенте, когда пишешь строку сразу после двоеточия. Однако, встроенная функция работает (sin).
FF 1.06 имеет баг с нечувствительностью фрейма к onLoad при рефреше (см. убранные варианты onLoad).
IE6 SP2 работает при всех вариантах.
  Вверх
Гость_12345
Дата 22.11.2005, 22:05 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











Помню, в древности от такой загрузки пришлось отказаться из-за крупных проблем с NN4 и 3 и грузить из отдельных страниц.
  Вверх
Elfet
Дата 10.2.2006, 21:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Белый и Пушистый
****


Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

Репутация: нет
Всего: 16



Глюк! smile Никак понять не могу! smile Ошибка:Объект не поддерживает это свойство или метод
Код

<a href='javascript:parent.frames["bar"].addid(" :мел: ");'>


Это сообщение отредактировал(а) Elfet - 10.2.2006, 21:21


--------------------
PM MAIL WWW Skype   Вверх
Aliance
Дата 11.2.2006, 22:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



А структуру фреймов и код фрейма bar ты нам не хочешь показать?
PM MAIL WWW ICQ Skype   Вверх
Greendrake
Дата 27.3.2006, 18:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 364
Регистрация: 14.7.2005

Репутация: нет
Всего: 6



Цитата(Sardar @ 9.9.2005, 23:58)
Сними фрейм по ID, отдай этой функции:
Код
function getIframeDOMDocument(ifr) {
  return (ifr.contentDocument) ? ifr.contentDocument: ((ifr.contentWindow) ? ifr.contentWindow.document : ifr.document);
}

Код

var ifr = document.createElement('IFRAME');
document.body.appendChild(ifr);
alert(getIframeDOMDocument(ifr));


В опере 8.5 пишет null. Как с этим бороться?
PM MAIL   Вверх
Yuriy_G
Дата 31.12.2006, 22:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 31.12.2006

Репутация: нет
Всего: нет



Подскажите как необходимо прописать скрипт, чтоб новое окно открывалось, а потом через определенное время исчезало (закрывалось).
Напишите, пожалуйста, пример такого скрипта.
Спасибо.
PM MAIL   Вверх
Страницы: (3) Все [1] 2 3 
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.1721 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.