|
|
29.04.2018, 08:55
|
|
Интересующийся
|
|
Регистрация: 20.07.2017
Сообщений: 11
|
|
|
Работа с iframe
Добрый день, друзья!
Есть выпадающий список <select> и iframe ниже этого списка. При клике по элементам <option> списка изменяется атрибут src фрейма.
И после этой замены уже не получается работать с самим фреймом (перестают срабатывать события).
Как быть в таком случае? думал как-то делегирование событий реализовать, но не удается.
|
|
29.04.2018, 09:02
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Что за события? куда навешиваете?
|
|
29.04.2018, 09:17
|
|
Интересующийся
|
|
Регистрация: 20.07.2017
Сообщений: 11
|
|
|
При наведении мыши на элементы фрейма, они обрамляются рамкой. При уходе курсора с элемента - рамка исчезает.
Скрипт нормально работает, но когда обновляется src фрейма, перестает работать. С cross-origin проблем нет - работаю только со страницами своего сайта.
|
|
29.04.2018, 09:29
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="https://masterhost.ru/" frameborder="0"></iframe>
<select>
<option value="https://masterhost.ru/">1</option>
<option value="https://quto.ru/">2</option>
</select>
<script>
var frame = document.querySelector('iframe');
frame.addEventListener('mouseover', e=> e.target.style.border = "10px solid red");
frame.addEventListener('mouseout', e=> e.target.style.border = "0px");
document.querySelector('select').addEventListener('change', e=> frame.src = e.target.value);
</script>
</body>
</html>
|
|
29.04.2018, 09:30
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
сделайте минимальный макет
|
|
29.04.2018, 10:02
|
|
Интересующийся
|
|
Регистрация: 20.07.2017
Сообщений: 11
|
|
Вот примерная реализация на jquery. Все страницы на одном домене
Страница index.html
|
Код:
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select>
<option class="option_page" value="page1.html">page1</option>
<option class="option_page" value="page2.html">page2</option>
</select>
<br><br>
<iframe id="mark_frame" src="page1.html"></iframe>
<script>
$('.option_page').click(function() {
var page = $(this).val();
$('#mark_frame').attr("src", page);
});
var iframe = window.frames[0];
$(iframe).mouseover(function(e) {
if (e.target.children.length == 0) {
$(e.target).css({
border: "1px solid blue",
cursor: "pointer"
});
}
});
$(iframe).mouseout(function(e) {
$(e.target).css({
border: "none"
});
});
</script>
</body>
</html> |
Страница page1.html
|
Код:
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page1</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html> |
Страница page2.html
|
Код:
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page2</title>
</head>
<body>
<p>4</p>
<p>5</p>
<p>6</p>
</body>
</html> |
|
|
29.04.2018, 10:11
|
 |
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
|
gegavat, потому что при обновлении Iframe, нужно заново подключаться к нему.
|
|
29.04.2018, 10:13
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="option_page">
<option value="page1.html">page1</option>
<option value="page1.html">page2</option>
</select>
<br><br>
<iframe id="mark_frame" src="page1.html"></iframe>
<script>
$('#option_page').change(function() {
$('#mark_frame').prop("src", this.value);
});
$('#mark_frame').mouseover(function(e) {
if (e.target.children.length == 0) {
$(e.target).css({
border: "1px solid blue",
cursor: "pointer"
});
}
});
$('#mark_frame').mouseout(function(e) {
$(e.target).css({
border: "none"
});
});
</script>
</body>
</html>
|
|
29.04.2018, 10:16
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
1) неверный выбор события для селекта
2) src не attr, а prop
3) селектор нужен для самого селекта а не опшина
4) селектора фрейма для рамки более чем достаточно
5) зачем вообще делать рамку JS если с этим отлично справляется CSS
6) для чего эта строчка? e.target.children.length == 0
|
|
29.04.2018, 10:33
|
|
Интересующийся
|
|
Регистрация: 20.07.2017
Сообщений: 11
|
|
|
Хм.. у меня сейчас рамка на весь фрейм целиком накладывается, а не на отдельные элементы в нем.
Вообще задача в том, чтобы выделять рамкой элементы во фрейме и затем по клику по этим элементам извлекать их id для последующей обработки.
|
|
|
|
