看人家写的真的是摸不着头脑。自己写、还是清楚

局部数据的刷新：可以使用ajax。这里只是简单的演示
只作：例子使用、简单演示页面跳转

a标签中target属性和iframe中的name对应。相当于将该链接加载到当前的iframe界面
我这里使用maven项目演示

index.html
该页面默认嵌套了indexshow.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div>

<!--    假设是导航栏部分-->

    <a href="book.html" target="tbody">book</a><br>

    <a href="newIndex.html" target="tbody">newIndex</a>

</div>

<!-- 内容主体区域 -->                        <!-- 540px -->

<iframe name="tbody" src="indexshow.html" style="width:100%;height:100%;border:none;">

</iframe>

</body>

</html>

book.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div style="background-color: red ;height: 600px;width: 600px">

    我是book页面

</div>

</body>

</html>

indexshow.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div style="background-color: darkgoldenrod;width: 800px;height: 600px">

    这里是indexshow页面

</div>

</body>

</html>

newIndex.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div style="width: 800px;height: 900px;background-color: gray">

    我是newIndex页面。默认的页面

</div>

</body>

</html>




iframe的简单使用的更多相关文章

  1. iframe的简单使用方法

    1.父页面调用子页面的元素(a代表iframe的id或者class,b代表子页面) $('a').contents().find("b") 2.子页面调用父页面的元素(c代表父页面 ...

  2. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  3. iframe相关知识

    iframe 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦.一般通过百分比 ...

  4. iframe自适应高度，多层嵌套iframe自适应高度的解决方法

    在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点.想比之下,iframe就简单多了!处理iframe的自适应宽.高,会经常用到,网上整理了一份,写在这里备用: 单个iframe 高 ...

  5. atitit.ajax上传文件的实现原理 与设计

    atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直 ...

  6. 【Geek议题】当年那些风骚的跨域操作

    前言 现在cross-origin resource sharing(跨域资源共享,下简称CORS)已经十分普及,算上IE8的不标准兼容(XDomainRequest),各大浏览器基本都已支持,当年为 ...

  7. 微前端框架 之 qiankun 从入门到源码分析

    封面 简介 从 single-spa 的缺陷讲起 -> qiankun 是如何从框架层面解决 single-spa 存在的问题 -> qiankun 源码解读,带你全方位刨析 qianku ...

  8. HTML Entry 源码分析

    简介 从 HTML Entry 的诞生原因 -> 原理简述 -> 实际应用 -> 源码分析,带你全方位刨析 HTML Entry 框架. 序言 HTML Entry 这个词大家可能比 ...

  9. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

随机推荐

  1. 60行从零开始自己动手写FutureTask是什么体验？

    前言 在并发编程当中我们最常见的需求就是启动一个线程执行一个函数去完成我们的需求,而在这种需求当中,我们常常需要函数有返回值.比如我们需要同一个非常大的数组当中数据的和,让每一个线程求某一个区间内部的 ...

  2. Python爬虫：为什么你爬取不到网页数据

    前言: 之前小编写了一篇关于爬虫为什么爬取不到数据文章(文章链接为:Python爬虫经常爬不到数据,或许你可以看一下小编的这篇文章), 但是当时小编也是胡乱编写的,其实里面有很多问题的,现在小编重新发 ...

  3. Luogu3398 仓鼠找sugar (LCA)

    第一发lg[]没开够RE了,下了数据本地一直停止运行,还以为是dfs死了,绝望一交,A了... 判断\(x\)是否在路径\(s-t\)上,只需满足 \(dep_{x} >= dep_{LCA(s ...

  4. Canvas 笔记目录

    Canvas 基础笔记 初次认识 Canvas Canvas 线性图形(一):路径 Canvas 线性图形(二):圆形 Canvas 线性图形(三):曲线 Canvas 线性图形(四):矩形 Canv ...

  5. 圆形谷仓Circular Barn_Silver---（DP优化 / ）队列 + 贪心（复杂度O(2n)）---DD(XYX)​​​​​​​的博客

    目录 小数据 大数据 小数据 题目描述 农夫约翰有一个圆形的谷仓,谷仓分成了环形的n(3≤n≤1000)个房间,编号为1 , 2 , -- .每个房间有三个门,两个门通往两个相邻的房间,第三个门朝外. ...

  6. 内网技巧-通过SAM数据库获得本地用户hash的方法

    内网技巧-通过SAM数据库获得本地用户hash的方法 在windows上的C:\Windows\System32\config目录保存着当前用户的密码hash.我们可以使用相关手段获取该hash. 提 ...

  7. Shiro反序列化利用

    Shiro反序列化利用 前言:hvv单位这个漏洞挺多的,之前没专门研究打法,特有此篇文章. Shiro rememberMe反序列化漏洞(Shiro-550) 漏洞原理 Apache Shiro框架提 ...

  8. 【JAVA】学习路径36-写到硬盘FileOutputStream Write的三种方法

    import java.io.FileOutputStream;import java.io.FileReader;import java.io.IOException;import java.nio ...

  9. CAD问题

    经过长时间的摸索,终于弄好了du.我是通过禁用硬件加速可zhi以用的.方法就是打开cad,点击左上角dao的那个黑色小三角,再点击"选项","系统"," ...

  10. noip2015提高组初赛

    一.单项选择题(共15题,每题1.5分,共计22.5分:每题有且仅有一个正确选项) 线性表若采用链表存储结构,要求内存中可用存储单元地址( ). A. 必须连续 B. 部分地址必须连续 C. 一定不连 ...