怎么用JavaScript来实现 iframe效果

怎么用javascript 实现像OA后台那样点击左边导航，右边区域显示不同的网页，就像iframe一样。

查看完整描述

2 回答

已采纳

小王子抓猫咪

TA贡献9条经验获得超7个赞

这个东西不是应该用HTML结构和CSS样式来写吗，跟JS没有一点关系。

你如果不想用iframe，就考虑用html+css来实现

具体代码

<html>
    <head> 
    </head>
    <body class="clearfix">
        <!--nav就是左侧的导航-->
        <nav class="nav">
            <li>nav1</li>
            <li>nav2</li>
            <li>nav3</li>
        </nav>
        <!--container就是右侧的网页内容-->
        <div class="container">
        </div>
    </body>
</html>

.clearfix{
    zoom: 1;
}
.clearfix:after{
    content: "";
    display: table;
    clear: both;
}
.nav{
    float:left;
    width: 30%;
    background-color: red;
}
.container{
    float: left;
    width: 70%;
    background-color: green;
}

你说想要的只是一个两栏布局

与之类似的还有顶，左，右或者左中右三栏布局等等

你可以多去大神们的博客看看，或者慕课里就有简单的网页布局讲解课程。

希望采纳我的答案，纯手写。

反对回复 2016-09-10

慕前端9656150
我要的不是CSS布局，我想要功能实现的方法，不用js 也可以，就像平常网页邮箱或网页后台那样，点击导航里的项，实现右边内容区域不同网页的显示类似 iframe 那样。

回复 2016-09-11
小王子抓猫咪
你想要的是一个tab选项卡是吗，左侧导航有三项，每一项点击后右侧就会出现对应项目的内容是吗。这样的效果可以用Js也可以用css来实现，iframe也并不能实现你想要的功能。看你的提问，我觉得你应该不了解单页面应用或者是页面路由功能。复杂的我们先不说。最简单的实现方式就是通过不同的div切换来实现，不知道慕课网上的一些讲解菜单，下拉菜单等课程你有没有仔细看过。原理都很类似。最简单的一种就是右侧的container这个div容器，你在里面定义好几个不同的子div。分别代表不同的导航对应的内容。将所有这些子div设置width:100%, height:100% position:absolute left:0 top:0 opacity:0 通过左侧导航按钮的点击来找到对应的div并且设置该div的opacity:1可以实现这种切换功能。

回复 2016-09-11
吃瓜小夏
回复慕大神仙楼主说的应该是后台管理系统左侧导航栏右侧表单不用iframe用什么

回复 2017-05-20

慕侠2282842

TA贡献1条经验获得超0个赞

用DIV怎么实现框架的效果，就是点左边的导航栏，在右边显示内容，不用iframe的话，该怎么实现呢

反对回复 2018-06-14

热搜

最近搜索清空

怎么用JavaScript来实现 iframe效果

怎么用JavaScript来实现 iframe效果

2 回答

添加回答