window操作frames框架数组

最新推荐文章于 2021-02-26 14:40:46 发布

Byte_Dance

最新推荐文章于 2021-02-26 14:40:46 发布

阅读量3.5k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Byte_Dance/article/details/79108141

版权

JS 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

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>

Byte_Dance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
window操作frames框架数组

index主页面:frameset框架不能和body在一起使用html>lang="en"> charset="UTF-8"> 索引 rel="icon" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516353689965&di=8dfc47790a10cc35e
复制链接

扫一扫