Javascript-форум - Работа с iframe

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Работа с iframe (https://javascript.ru/forum/events/73620-rabota-s-iframe.html)

Работа с iframe

Добрый день, друзья!
Есть выпадающий список <select> и iframe ниже этого списка. При клике по элементам <option> списка изменяется атрибут src фрейма.
И после этой замены уже не получается работать с самим фреймом (перестают срабатывать события).
Как быть в таком случае? думал как-то делегирование событий реализовать, но не удается.

Что за события? куда навешиваете?

При наведении мыши на элементы фрейма, они обрамляются рамкой. При уходе курсора с элемента - рамка исчезает.
Скрипт нормально работает, но когда обновляется src фрейма, перестает работать. С cross-origin проблем нет - работаю только со страницами своего сайта.

<!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>

сделайте минимальный макет

Вот примерная реализация на 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>

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

<!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>

1) неверный выбор события для селекта
2) src не attr, а prop
3) селектор нужен для самого селекта а не опшина
4) селектора фрейма для рамки более чем достаточно
5) зачем вообще делать рамку JS если с этим отлично справляется CSS
6) для чего эта строчка? e.target.children.length == 0

Хм.. у меня сейчас рамка на весь фрейм целиком накладывается, а не на отдельные элементы в нем.
Вообще задача в том, чтобы выделять рамкой элементы во фрейме и затем по клику по этим элементам извлекать их id для последующей обработки.