index主页面:frameset框架不能和body在一起使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>索引</title>
<link rel="icon" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516353689965&di=8dfc47790a10cc35e7e8ffdf6a2e3daa&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2F201304%2F28%2F002505wita9kbiafccl2ss.png"/>
</head>
<frameset rows="50px,*">
<frame src="top.html" name="top"/></frame>
<frameset cols="50%,*">
<frame src="left.html" name="left"/></frame>
<frame src="right.html" name="right"/></frame>
</frameset>
</frameset>
</html>
top分页面:控制按钮效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button{
border-radius: 5px;
outline:none;
}
</style>
</head>
<body>
<!--定义三个按钮,用来操作三个页面-->
<button id="top">top</button>
<button id="left">left</button>
<button id="right">right</button>
<button id="toutiao">在左侧打开头条</button>
<button id="baidu">在右侧打开百度</button>
</body>
<script type="text/javascript">
var wind = window.top.frames;
document.getElementById("top").onclick = function(){
var topid = wind[0].document.documentElement.style.background;
if(topid == "red"){
wind[0].document.documentElement.style.background = "white";
}else{
wind[0].document.documentElement.style.background = "red";
}
}
document.getElementById("left").onclick = function(){
if(wind[1].document.documentElement.style.background == "blue"){
wind[1].document.documentElement.style.background = "white";
}else{
wind[1].document.documentElement.style.background = "blue";
}
}
document.getElementById("right").onclick = function(){
if(wind[2].document.documentElement.style.background == "green"){
wind[2].document.documentElement.style.background = "white";
}else{
wind[2].document.documentElement.style.background = "green";
}
}
document.getElementById("toutiao").onclick = function(){
wind[1].location = "https://www.toutiao.com/";
}
document.getElementById("baidu").onclick = function(){
wind[2].location= "https://www.baidu.com/?tn=78000241_5_hao_pg";
}
</script>
</html>
两个辅页面:显示内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>