Главная Вход в систему Регистрация
Задать вопрос Консультации Пользователи Форум
О системе Помощь
Задать вопрос экспертам
Консультация № 172651
26.09.2009, 14:14
0.00 руб.
0 7 3
Компьютеры Программирование
Здравствуйте, уважаемые эксперты! Есть некоторый статический документ index.html. В нем есть форма, содержащая три списка SELECT. Также на странице существуют три инлайновых фрейма iframe1, iframe2, iframe3.
Нужно, чтобы при выборе какого-либо значения из любого списка во все три фрейма подгружались определенные html-документы. Например, при выборе какого либо значения из первого списка в iframe1 подгружается документ document1.html, в iframe2 подгружается документ document2.html, в iframe3 подгружается документ document3.html и т.д.
Как реализовать всё это на JavaScript?
И можно ли здесь вообще обойтись без iframe, например, при помощи jQuery. Если можно, то как?

Обсуждение

Неизвестный
26.09.2009, 16:31
общий
это ответ
Здравствуйте, denmmx.
При помощи jQuery = с помощью AJAX.
Прежде всего, надо создать три блочных элемента на странице, которые будут выступать в роли-iframe`заменителей. Присвоим им id="block1", "block2", "block3".
При выборе значения из списка - то есть, при наступлении события "change", - выполняем следующую конструкцию:

$('#block1').load('адрес документа 1');
$('#block2').load('адрес документа 2');
$('#block3').load('адрес документа 3');

Почитайте документацию по функции load, возможно, Вы найдете там много интересного. URL >>

С уважением, Товарищ Бородин
5
Неизвестный
26.09.2009, 18:06
общий
Товарищ Бородин:
Не могли бы Вы расписать данный пример поподробнее, поскольку я не очень хорошо разбираюсь в английском языке, да и времени на чтение документации особо нет
Вот пример моего кода:
Код:

<form id="search">
		<p><label>Список1
			<select name="sp1" id="sp1">
					<option>Значение №1</option>
					<option>Значение №2</option>
					<option>Значение №3</option>
			</select>
				</label>
				<label>Список2
				<select name="sp2" id="sp2">
					<option>Значение №100</option>
					<option>Значение №200</option>
					<option>Значение №300</option>
					<option>Значение №400</option>
					<option>Значение №500</option>
				</select>
				</label>
		Список3 
		<label>
		<select name="sp3" id="sp3">
					<option>Значение №1000</option>
					<option>Значение №2000</option>
					<option>Значение №3000</option>
		</select>
		</label>
		</p>
</form>
<p>
<div id="block1">
<div id="block2">
<div id="block3">
</p>


Какую именно конструкцию сюда нужно вписать?
Неизвестный
26.09.2009, 18:22
общий
Ну у меня со временем вообще-то тоже не особо. Что касается документации, то там есть примеры. Они достаточно простые и наглядные, чтобы в них мог разобраться не очень сведущий в Javascript человек.
Неизвестный
26.09.2009, 18:22
общий
denmmx:
Попозже, возможно, напишу, если время будет.
Неизвестный
26.09.2009, 18:29
общий
Товарищ Бородин:
Огромное спасибо, жду вашего ответа!
Неизвестный
27.09.2009, 06:16
общий
это ответ
Здравствуйте, denmmx.

Я, как ярый противник всемозможных jQuery и иже с ним, в очередной раз предлагаю всё сделать собственными руками.
В приложении находится функция GetIframe, которая позволит Вам не только обратиться к нужному iframe, но так же и к его "втнутренностям" как то window, document и body.

В вашем случае попробуйте использовать её вот так:

// обработчик события onchage
function select_onchage(value)
{
for(var i = 1; i <=3; i++)
{
GetIframe("iframe" + i, "self").src = "document" + i + ".html";
}
}

и не нужно никаких jQuery.

Удачи.

Приложение:
// iframe_id = Iframe Identifier
// part = Desirable Iframe part
function GetIframe(iframe_id, part)
{
var ifr = document.getElementById(iframe_id);
switch(part)
{
case "self":
if (ifr.contentWindow)
return ifr;
else // IE
return document.frames[iframe_id];
case "window":
if (ifr.contentWindow)
return ifr.contentWindow;
else // IE
return document.frames[iframe_id].window;

case "document":
if (ifr.contentDocument)
return ifr.contentDocument;
else // IE
return document.frames[iframe_id].document;

case "body":
var doc;
if (ifr.contentDocument)
doc= ifr.contentDocument;
else // IE
doc = ifr.document;
return doc.getElementsByTagName("body")[0];
}
}
3
Неизвестный
28.09.2009, 12:03
общий
это ответ
Здравствуйте, denmmx.
Вариант с iframe
Код:
<script type=text/javascript>
function iframeload()
{
 var ifr1=document.getElementById('block1');
 var ifr2=document.getElementById('block2');
 var ifr3=document.getElementById('block3');
 var sel1=document.getElementById('sp1').value;
 var sel2=document.getElementById('sp2').value;
 var sel3=document.getElementById('sp3').value;
 //вставьте вашу логику
 //для примера будем искать гуглом в разных комбинациях
 ifr1.src="http://google.com/search?q="+encodeURIComponent(sel1)+encodeURIComponent(sel2)+encodeURIComponent(sel3);
 ifr2.src="http://google.com/search?q="+encodeURIComponent(sel1)+encodeURIComponent(sel3)+encodeURIComponent(sel2);
 ifr3.src="http://google.com/search?q="+encodeURIComponent(sel3)+encodeURIComponent(sel2)+encodeURIComponent(sel1);
}
</script>

<form id="search">
		<p><label>Список1
			<select name="sp1" id="sp1" onchange="iframeload();">
					<option>Значение №1</option>
					<option>Значение №2</option>
					<option>Значение №3</option>
			</select>
				</label>
				<label>Список2
				<select name="sp2" id="sp2" onchange="iframeload();">
					<option>Значение №100</option>
					<option>Значение №200</option>
					<option>Значение №300</option>
					<option>Значение №400</option>
					<option>Значение №500</option>
				</select>
				</label>
		Список3 
		<label>
		<select name="sp3" id="sp3" onchange="iframeload();">
					<option>Значение №1000</option>
					<option>Значение №2000</option>
					<option>Значение №3000</option>
		</select>
		</label>
		</p>
</form>
<p>
<!-- вроде тут должны быть iframeы, а не divы -->
<iframe id="block1"></iframe>
<iframe id="block2"></iframe>
<iframe id="block3"></iframe>
</p>
5
Форма ответа