Форум

Feex · #1 (**permalink**) 01.01.2016, 16:06

Доброго времени суток.
Помогите решить задачу: нужно чтобы ссылки(разные) из 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 · #2 (**permalink**) 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 · #3 (**permalink**) 01.01.2016, 17:19

Сообщение от Deff

<!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 · #4 (**permalink**) 01.01.2016, 17:27

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

Feex · #5 (**permalink**) 01.01.2016, 17:39

Сообщение от Deff

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

Идеально!!

Большое спасибо

(+)

Форум

Справочник

Discord чат

Курсы javascript