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

局部数据的刷新：可以使用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. Java中break、continue和return三者之间的区别

    控制流程语句 java关键字break.continue.return主要按三个纬度去区分. 作用不同 结束不同 紧跟不同  一.作用不同 1.break:执行break操作,跳出所在的当前整个循环, ...

  2. FutureTask源码深度剖析

    FutureTask源码深度剖析 前言 在前面的文章自己动手写FutureTask当中我们已经仔细分析了FutureTask给我们提供的功能,并且深入分析了我们该如何实现它的功能,并且给出了使用Ree ...

  3. Spring 02: Spring接管下的三层项目架构

    业务背景 需求:使用三层架构开发,将用户信息导入到数据库中 目标:初步熟悉三层架构开发 核心操作:开发两套项目,对比Spring接管下的三层项目构建和传统三层项目构建的区别 注意:本例中的数据访问层, ...

  4. CSS 子节点继承父节点(祖先节点)的样式

    CSS 有些属性可以让子节点从父节点或祖先节点继承,文本.字体.列表属性等样式都可以被子节点继承.子节点没有自身的样式,子节点将继承父节点或祖先节点的样式. <ul class="co ...

  5. DL基础：cs231n assignment 1

    cs231n assignment 1 20210804 - 20210808. 目录 cs231n assignment 1 总结 KNN 思想 cross-validation 编程细节 SVM ...

  6. PTA C语言作业

    6-1 使用函数输出一个整数的逆序数 (20 分) 本题要求实现一个求整数的逆序数的简单函数. 函数接口定义: int reverse( int number );  其中函数reverse须返回用户 ...

  7. 【android 逆向】破解crackme0502

    1.首先将crackme0502 拖入模拟器.打开应用,随意输出字符串 2. 将APK 拖入AndroidKiller 反编译 3.先查看androidmanifest.xml <?xml ve ...

  8. 【2022-09-09】Django框架(九)

    Django框架(九) cookie与session简介 网址的发展史: 1.起初网站都没有保存用户功能的需求,所有用户访问返回的结果都是一样的. 比如:新闻网页,博客网页,小说... (这些网页是不 ...

  9. 《Java基础——继承》

    Java基础--继承     一.类的继承: 规则: 1.一个子类只能有一个父类,但一个父类可以有多个子类,每个子类都可以作为父类使用. 2.若一个类没有声明父类,则默认其父类为Object. 3.父 ...

  10. AOP实现系统告警

    工作群里的消息怕过于安静,又怕过于频繁 一.业务背景 在开发的过程中会遇到各种各样的开发问题,服务器宕机.网络抖动.代码本身的bug等等.针对代码的bug,我们可以提前预支,通过发送告警信息来警示我们 ...