Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Открытие ссылок из select в iframe (https://javascript.ru/forum/dom-window/60466-otkrytie-ssylok-iz-select-v-iframe.html)

Feex 01.01.2016 16:06

Открытие ссылок из select в iframe
 
Доброго времени суток.
Помогите решить задачу: нужно чтобы ссылки(разные) из select окрывались в iframe.

вот примерно что удалось найти по смыслу:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>

<script>
function openinframe(target) {
document.getElementById(target).src = 'http://site.ru';
}
</script>
 
<form>
<div>
<select>
<option selected>Выберите ссылку</option>
<option onclick="openinframe('window1','http://site1.ru')"> сайт 1</option>
<option onclick="openinframe('window1','http://site2.ru')"> сайт 2</option>
<option onclick="openinframe('window1','http://site3.ru')"> сайт 3</option>
</select>
</div>
</form>
 
<div>
<iframe width="200" height="100" scrolling="auto" frameborder="0" id="window1"></iframe>
</div>

</body>
</html>


в этом примере открывается только site.ru естественно, а надо чтоб открывались выбираемые из select ссылки.
Не знаю как переделать...:-?
И еще желательно закрывашку приделать: чтобы при выборе "выберите ссылку" открытая ссылка в iframe закрывалась. Или отдельную кнопку сделать на закрытие открытой в iframe ссылки(этот вариант даже лучше).
Заранее благодарен.

Deff 01.01.2016 17:02

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>

<script>
function openinframe(target) {
document.getElementById('window1').src = target;
}
</script>
 
<form>
<div>
<button type="button" onclick="document.getElementById('select0').selected=true;openinframe('')">Х</button>
<select>
<option id="select0" selected onclick="openinframe('')">Выберите ссылку</option>
<option onclick="openinframe('http://javascript.ru/forum/')"> сайт 1</option>
<option onclick="openinframe('http://habrahabr.ru/top/')"> сайт 2</option>
<option onclick="openinframe('https://www.google.ru/')"> сайт 3</option>
</select>
</div>
</form>
 
<div>
<iframe width="100%" height="300" scrolling="auto" frameborder="0" id="window1"></iframe>
</div>

</body>
</html>

Feex 01.01.2016 17:19

Цитата:

Сообщение от Deff (Сообщение 402196)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>

<script>
function openinframe(target) {
document.getElementById('window1').src = target;
}
</script>
 
<form>
<div>
<button type="button" onclick="openinframe('')">Х</button>
<select>
<option selected onclick="openinframe('')">Выберите ссылку</option>
<option onclick="openinframe('http://javascript.ru/forum/')"> сайт 1</option>
<option onclick="openinframe('http://habrahabr.ru/top/')"> сайт 2</option>
<option onclick="openinframe('https://www.google.ru/')"> сайт 3</option>
</select>
</div>
</form>
 
<div>
<iframe width="100%" height="300" scrolling="auto" frameborder="0" id="window1"></iframe>
</div>

</body>
</html>

Это именно то, что надо!! Спасибо!!!
Только один момент: при нажатии кнопки "Х" в поле селекта остается название закрытого сайта, а надо чтоб возвращалось на "Выберите ссылку", т.е. в исходное состояние :)

Deff 01.01.2016 17:27

Вродь поправил

Feex 01.01.2016 17:39

Цитата:

Сообщение от Deff (Сообщение 402198)
Вродь поправил

Идеально!!:victory:
Большое спасибо :thanks: :yes:
(+)


Часовой пояс GMT +3, время: 08:33.