Javascript-форум - Показать сообщение отдельно

gegavat · #6 (**permalink**) 29.04.2018, 10:02

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