目标：后台系统，点击侧栏菜单后，右边div的要显示对应的内容。就是说，每选一下左边的菜单，右边的内容都要变化。

方法：使用iframe框架。

第一步：在需要展示的div中写iframe：

<iframe src=“要插入的html文件.html” name="iframe（任意取名）" width=420 height=330 frameborder=0 scrolling=auto>如果浏览器不支持iframe框架，会向用户显示这里的文字</iframe>

第二步：在相应的li中写：

<li><a href="要显示的html文件.html" target="iframe的name">项目管理</a><iframe>

最后成型的代码：

另外一个更加清晰简单的实现：

<html>

<body>

<a href= "1.html " target= "iFrame1 "> page1 </a> <br/>

<a href= "2.html " target= "iFrame1 "> page2 </a> <br/>

<a href= "3.html " target= "iFrame1 "> page3 </a> <br/>

<a href= "4.html " target= "iFrame1 "> page4 </a> <br/>

<div id= "iFrame1 " style= "position:absolute; left:220px; top:200px; z-index:18 ">

<iframe name= "iFrame1 " width=542 height=615 src= "1.html " scrolling= "auto " frameborder= "0 "> </iframe>

</div>

</div> </body>

</html>

iframe框架的应用的更多相关文章

  1. ASP.NET 页面禁止被 iframe 框架引用

    两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...

  2. 当session过期后自动跳转到登陆页而且会跳出iframe框架

    写项目时在重定向后一直存在一个问题就是重定向后登陆页面会出现在跳出的子框架里.

  3. session失效后，登录页面嵌入iframe框架

    在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...

  4. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  5. js实现网页防止被iframe框架嵌套及几种location.href的区别

    首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...

  6. javascript_获取iframe框架中元素节点的属性值

    1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...

  7. iframe框架自适应高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....

    来源于crm项目的contact/edit.html 一.背景是这样的 最近在做crm系统的前端页面,有一个页面呢,点击“查看全部信息”时会弹出,这个弹窗里面又有分页导航,分页不是使用ajax 异步刷 ...

  8. 在Iframe框架下如何跳转到登录界面

    在Iframe框架下跳转到登录界面总会跳到子界面中,类似于下图 试用Respon.Redirect()不行, 用Js函数,但我跳转代码都是写在cs文件中的,用Respose.write(),js函数根 ...

  9. Javscript调用iframe框架页面中函数的方法

    Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...

随机推荐

  1. 如何下载github项目中的部分文件(文件夹)

    https://minhaskamal.github.io/DownGit/#/home 将你要下载的链接放进去即可.

  2. Spring：利用PerformanceMonitorInterceptor来协助应用性能优化

    前段时间对公司产品做性能优化,如果单依赖于测试,进度就会很慢.所以就通过对代码的方式来完成,并以此来加快项目进度.具体的执行方案自然就是要知道各个业务执行时间,针对业务来进行优化. 因为项目中使用了S ...

  3. Yii2高级模板vendor和application非同级目录部署

    上面是Yii2的高级模板,当我们有多个application的时候,这种高级模板可以可以提供很好的扩展性,多个application共用一份YII2框架,默认情况下,框架和application是在同 ...

  4. instance 网卡是如何被拉起来的？- 每天5分钟玩转 OpenStack（172）

    instance 的网卡是如何被配置并拉起的?这是理解和用好 cloud-init 非常关键的一步.我们先讨论一个最简单基础的场景:镜像中没有安装 cloud-init. 此时 instance 启动 ...

  5. Java并发编程：线程的基本状态

    一.线程的基本状态 线程基本上有5种状态,分别是:NEW.Runnable.Running.Blocked.Dead. 1)新建状态(New) 当线程对象对创建后,即进入了新建状态,如:Thread ...

  6. Java ---自定义标签（二）

    上篇文章的最后,我们自定义了一个带属性的标签,并使用它完成了一个简单的案例.其实到这我们已经可以看出来,前端jsp页面只需要写一个类似html语法的标签,就可以完成将集合中的数据取出来并展示这么相对复 ...

  7. 1133: 零起点学算法40——多组测试数据（a+b)II

    1133: 零起点学算法40--多组测试数据(a+b)II Time Limit: 1 Sec  Memory Limit: 64 MB   64bit IO Format: %lldSubmitte ...

  8. 怎样配置mysql_installer_community_V5.6........_setup的数据库？

    直接访问查看如下路径就可以根据方法匹配 http://jingyan.baidu.com/album/c35dbcb0f1b1448916fcbcc7.html

  9. asp.net SignalR 一对一聊天

    <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/S ...

  10. 微信小程序,前端大梦想(二)

    微信小程序的视图与渲染  今天我们从四个方面来了解小程序:   •组件的基本使用  •数据绑定  •渲染标签  •模板的使用     一.组件的基本使用:  微信小程序为我们的开发提供了丰富的UI组件 ...