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

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

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

ВСТУПЛЕНИЕ.

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

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

ЧЕГО ДЕЛАТЬ НЕЛЬЗЯ!!! (своеобразный ЧаВо, всем новичкам перечитать несколько раз)

• Изменение параметров главного окна. Нельзя добавлять или убирать элементы оформления
  главного окна - строку меню, полосы прокрутки, строку состояния, панель инструментов и т.п.
  *Исключение состовляет 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

Заметим что параметры:

Цитата(Aliance @ 5.3.2005, 22:12)

alwaysLowered 4 alwaysRised

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

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

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

ФРЕЙМЫ

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

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



ЧЕГО ДЕЛАТЬ НЕЛЬЗЯ!!!

• Получить доступ к свойствам документа из фреймов, доставленных с других серверов или домена. Политика безопастности не позволит данную операцию.
• Изменить содержимое поля адреса. Т.к. URL страницы показывает страницу, в которой задан набор фреймов, а не текущую, многие пытаются вывести именно ее. Но эти попытки безуспешны
• Сформировать запись в "Избранных", соотв. данной структуре фреймов!
  Хотя можно восстановить структуру фреймов, как это сделать будет описано чуть позже.

У фреймов своя специфическая иерархия, следующая картинка отоброзит, как происходит обращение фреймов друг к другу в HTML документе с двойной вложенностью фреймов.
(т.к. картинка нарисована мною "от руки", некоторые надписи могут быть непонятны, если что - обращайтесь, разъясню):



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

Код

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

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

Картинка

Присоединённый файл ( Кол-во скачиваний: 212 )
 frames.jpg 59,91 Kb

Цитата(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 ругается и не показывает

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

Может кто знает альтернативный метод динамического генерирования фреймов, который будет работать во всех броузерах?

У меня код в ИЕ(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'овскими методами.

Цитата(Sardar @ 10.9.2005, 00:58)

У меня код в ИЕ(6.0 SP2) не заработал.

У меня в том же все прекрасно работает Чудеса

Проверил в 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 работает при всех вариантах.

Помню, в древности от такой загрузки пришлось отказаться из-за крупных проблем с NN4 и 3 и грузить из отдельных страниц.

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


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

А структуру фреймов и код фрейма bar ты нам не хочешь показать?

В опере 8.5 пишет null. Как с этим бороться?

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

Yuriy_G, вот здесь есть "пример такого скрипта", который Вам нужен.

Окно в общем то меняет цвет, работает как и положено. Но смущает один момент, просто показывает ошибку при открытие страницы. Пишет, что ошибка в строке 1. И как это понимать? Подскажите пожалуйста, в чем тут проблема.

suzaka, если честно, я не понимаю как оно по твоему должно работать


1. Ты пытыешся вызвать ф-цию setcolor() с непредусмотренным аргументом
это похоже прокатывает, в др. языках такое и компилироваться бы не стало.
2. Ошибка возикает по моему (проверять конкретно не стал) при попытке использовать name - 
неинициированную переменную.
3. При чём тут фреймы? 
Возможно ты хочешь чтобы цвет менялся во фреймах?
  а) у тебя 1 фрейм.
  б) для этого попробуй воспользоваться with.
4. document.close() - для чего?
по моему после этого document.write("..."); работать не должно.

Я по JS не специалист, сам недавно начал. Если что извеняйте.

Please, help me!
I cann't create modal window in Firefox. This is me code:

This is code work in IE! 

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

http://dark-demon.nm.ru/web/samples/ie_op_close_win.htm

Помогите со скриптом. Есть пример, несколько ссылок, открывающие новые окна. При нажатии на ссылку открывается окно, при нажатии на другую, открывается новое окно, при этом предудущее окно минимизируется (сварачивается) как это и должно быть. 
Как сделать чтобы минимизированное окно автоматически закрывалось?  Вариант с проверкой, типа if (!newwindow.closed сложноват, так как у меня в конкретном примере много ссылок.  Если есть предложения пишите, я думаю многие скажут спасибо, тема интересная.

  

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

но это от лукавого

Вот у меня тоже проблема с фреймами. Блуждание по страницам моего сайта организовано с помощью iфреймов (на главной два шт. + календарь архив). При выборе в календаре даты с новостью, в крайнем левом фрейме открывается анонс этой новости, заголовок которой является ссылкой на полный текс выбранной новости, так вот, проблема в том, что когда я нажимаю на заголовок анонса новости, страница с полным вариантом должна открываться в центральном фрейме, Но!!! почемуто, она открывается в новом окне!!!? При всем этом такой глюк происходит только с ИЕ (в опере и firefox все открывается там где надо) - какие причины могут быть этой ошибки в ИЕ? Подскажите пожалуйста.. (если нужна ссылка на сайт, для наглядности - в личном сообщении...).
Я использую в ссылке заголовка

как прочитать то что написано в статус баре? Есть window.status, но это для того, что бы туда что то занести. А прочитать как?

да я пробывал, не получается:
javascript:{var t = window.status; alert(t);}
в файрфоксе и IE7 не работает. Вываливается пустой алерт... Что не так?

а вы уверены, что такая конструкция точно сработает? javascript: {} ?

в ФФ, кстати, оно и не должно работать, ибо нечего соваться в служебные данные

Не вижу причин для неуверенности. Тот же алерт выскакивет. В Опере, к примеру, работает данный скрипт полностью... Может в ИЕ и ФФ действительно намутили с безопасностью, только с каких это пор статус стал содержать служебные данные? Да и установление пропертоса  на запись в файрфоксе ситуацию не изменило.

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

Ну пусть так... А почему не читает то? В опере работает, в ФФ и ИЕ нет.

Если есть iframe сурс которого содержит страницу с того же домена, что и родительский, то как получить доступ к DOM-элементам внутри этого же iframe?
Как реализовать, чтобы документ, который загружается в iframe, автоматически уменьшался в размере под размер iframe?

Это сообщение отредактировал(а) JAYBE - 5.10.2011, 16:53

Здравствуйте. Подскажите пожалуйста. Вариант авторесайза iFrame, если нет возможности изменять тот источник с которого берём информацию. + кросбарузерность.

http://dklab.ru/chicken/nablas/58.html

Aliance, 
вот какая проблема. Была у меня сказана, нет возможности изменять источник

При внимательном изучении статьи и всех ее ссылок, в итоге вы зашли бы сюда:
http://softwareas.com/cross-domain-communi...on-with-iframes

На этом сайте есть немного информации по фреймам.