Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > ОКНА и ФРЕЙМЫ

Автор: Aliance 5.3.2005, 23:12

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

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

Не путать с популярной программой «Окна» 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>

Автор: Sardar 9.3.2005, 03:17

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

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

alwaysLowered 4
alwaysRised

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

Автор: Aliance 10.3.2005, 21:40

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

Автор: Aliance 19.3.2005, 19:41

ФРЕЙМЫ

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

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

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

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

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

http://files.vingrad.ru/Aliance/frames.jpg

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

Код


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 20.3.2005, 00:42

Вот полезный код, динамически изменяющий ширину навигационного фрейма: http://forum.vingrad.ru/index.php?showtopic=36227&st=0&#entry270430

Автор: Aliance 26.8.2005, 09:29

Картинка

Автор: butionok 9.9.2005, 19:21

Цитата(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

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

Автор: Sardar 9.9.2005, 23:58

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

Автор: Aliance 10.9.2005, 14:21

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

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

У меня в том же все прекрасно работает smile

Чудеса

Автор: Гость_12345 22.11.2005, 22:02

Проверил в 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

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

Автор: Elfet 10.2.2006, 21:20

Глюк!

Никак понять не могу! smile

Ошибка:Объект не поддерживает это свойство или метод

Код


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

Автор: Aliance 11.2.2006, 22:08

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

Автор: Greendrake 27.3.2006, 18:20

Цитата(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. Как с этим бороться?

Автор: Yuriy_G 31.12.2006, 22:20

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

Автор: AKS 1.1.2007, 13:10

Yuriy_G, вот http://developer.mozilla.org/en/docs/DOM:window.close есть "пример такого скрипта", который Вам нужен.

Автор: suzuka 7.2.2007, 02:34

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <script>
function setcolor() {

    var r = Math.floor((Math.random() * 256)).toString(16);
    var g = Math.floor((Math.random() * 256)).toString(16);
    var b = Math.floor((Math.random() * 256)).toString(16);
    var colorString = "#" + r + g + b;

    document.write("<body bgcolor='" + colorString + "'></body>");
    document.close();

     setTimeout('setcolor(' + name + ')', 1000);
}
</script>
</head>
<frameset rows="100%" cols="100%"
  onload="for(var i = 0; i < 9; i++) setcolor(frames[i]);">
<frame name="f1">
<body>



</body>
</html>

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

Автор: lonli 2.4.2007, 01:21

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

Код


setTimeout('setcolor('+name+')',1000);
...
setcolor(frames[i]);

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

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

Автор: manipul 17.7.2007, 14:15

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

Код


<a href="myPage.htm" target="name" onclick="modalWin(); return false;">click here</a> 
...
function modalWin() {
    if (showModalDialog) {
        var w = showModalDialog("myPage.htm","name","resizable:yes;help:no;edge:sunken;dialogWidth:255px;dialogHeight:250px");
    } else {
        window.open('myPage.htm','name','height=255,width=250,modal=yes');
    }
}

This is code work in IE!

Автор: diAngel 2.8.2007, 09:02

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

пожалуйста помогите с этим кодом..оч надо

Автор: cruelangel 12.9.2007, 20:36

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

Автор: bork 4.1.2008, 01:44

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

Код


<html><head>
<script type="text/javascript" language="JavaScript">
<!--
function winop1()
{
windop_1 = window.open("http://www.rambler.ru","mywin","height=1000,width=2000,left=0,top=200");
}
function winop2()
{
windop_2 = window.open("http://mail.ru","mywin_2","height=1000,width=2000,left=0,top=200");
}
function winop3()
{
windop_3 = window.open("http://yandex.ru","mywin_3","height=1000,width=2000,left=0,top=200");
}
-->
</script>
</head>
<a href="javascript: winop1();">Link 1</a>
<a href="javascript: winop2();">Link 2</a>
<a href="javascript: winop3();">Link 3</a>
</center></body></html>

Автор: InfMag 29.1.2008, 13:37

Код


Wnd = window.open("page.html", "presentation", "toolbar=no,status=no,resizable=no,innderWidth=800px,innerHeight=600px");

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

Автор: bars80080 29.1.2008, 13:56

Код


Wnd.document.write('content');

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

Автор: Reasonsoul 2.9.2009, 11:01

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

Код


<a href="newind_1.html" target="menu" title=""><B><I>Новый метод создания 3D наноформ.</i></b></a>

Автор: priam220 24.9.2010, 12:54

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

Автор: bars80080 24.9.2010, 14:28

Код


var t = window.status; alert(t);

Автор: priam220 25.9.2010, 12:29

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

Автор: bars80080 25.9.2010, 22:29

Цитата(priam220 @ 25.9.2010, 12:29

)

javascript:{var t = window.status; alert(t);}

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

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

Автор: priam220 26.9.2010, 14:34

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

Автор: bars80080 26.9.2010, 18:40

Цитата(priam220 @ 26.9.2010, 14:34

)

только с каких это пор статус стал содержать служебные данные?

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

Автор: priam220 26.9.2010, 19:57

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

Автор: JAYBE 5.10.2011, 16:47

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

Автор: Serious2008 18.7.2012, 17:41

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

Автор: Aliance 19.7.2012, 09:23

Цитата(Serious2008 @ 18.7.2012, 18:41

)

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

Автор: Serious2008 19.7.2012, 13:01

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

Автор: Aliance 19.7.2012, 15:48

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

Автор: alexFast777 19.4.2015, 04:52

На этом http://itchief.ru/lessons/javascript/javascript-window-object-frames есть немного информации по фреймам.