frameset巢狀多個html，在一個html的js中呼叫另一個html的變數和函式(導航欄更新個人圖示)

苦澀精靈發表於2020-12-28
巢狀HTMLJS變數函式

畢業設計要做註冊後更新性別後導航欄的個人圖示也隨之改變，在frameset中做的兩個html互相呼叫函式怎麼都是undefined，終於實驗成功了。

test1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jQuery3.2.1.js"></script>
		<title></title>
	</head>
	<frameset rows="8%,92%" border="0">
		<frame name="left" src="test2.html" />
		<frameset cols="15%,85%">
			<frame id="frame_left" name="left" src="test4.html" />
			<frame id="frame_right" name="right" src="test3.html" />
		</frameset>
	</frameset>
	<body>
	</body>
</html>

test2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jQuery3.2.1.js"></script>
		<title></title>
	</head>
	<body>
		<img src="images/1.png" />
		<script language="javascript">
			var x = 30;

			function changeImg() {
				$("img").attr("src", "images/16.png");
			}
		</script>
	</body>
</html>

test3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jQuery3.2.1.js"></script>
		<title></title>
	</head>
	<body>
		<button>變數</button>
		<button>函式</button>
		<script language="javascript">
			$("button:eq(0)").click(function(){
				alert(self.parent.parent.left.x);
			})
			$("button:eq(1)").click(function(){
				self.parent.parent.left.changeImg();
			})
		</script>
	</body>
</html>

在這裡插入圖片描述

相關文章