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

局部数据的刷新：可以使用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. Kubernetes的整体架构

    K8s将集群中的机器划分为一个主节点和一群工作节点,在主节点上运行着集群管理相关的一组进程kube-apiserver.kube-controller-manager 和 kube-scheduler ...

  2. JVM学习之 内存结构

    目录 一.引言 1.什么是JVM? 2.学习JVM有什么用 3.常见的JVM 4.学习路线 二.内存结构 1. 程序计数器 1.1 定义 1.2作用 2. 虚拟机栈 2.1定义 2.2栈内存溢出 2. ...

  3. Python基础之list和tuple的使用

    list和tuple的使用 list Python内置的一种数据类型列表:list list是一种有序的集合,可以随身添加和删除其中的元素. 比如列出办理所有同学的名字,就可以用一个list表示: & ...

  4. Apache DolphinScheduler 2.X保姆级源码解析，中国移动工程师揭秘服务调度启动全流程

    2022年1月,科学技术部高新技术司副司长梅建平在"第六届中国新金融高峰论坛"上表示,当前数据量已经大大超过了处理能力的上限,若信息技术仍然是渐进式发展,则数据处理能力的提升将远远 ...

  5. nmtui 字符界面图形模式配置

    一.通过nmtui配置网络参数 Linux系统配置网络参数的方式有很多种,其中最简单最直接的方式就是直接修改网卡配置文件,但这种方式也很容易出错,比如说IPADDR.NETMASK.GATEWAY等参 ...

  6. HCIA-Datacom 3.3 实验三：以太网链路聚合实验

    实验介绍 随着网络规模不断扩大,用户对骨干链路的带宽和可靠性提出越来越高的要求.在传统技术中,常用更换高速率的接口板或更换支持高速率接口板的设备的方式来增加带宽,但这种方案需要付出高额的费用,而且不够 ...

  7. jQuery 判断父节点下是否有子节点

    查找父节点下是否有子节点有两个情况:(1)查找的是父元素的所有后代节点:(2)仅查找父元素的第一代子节点. <div id="app"> <div> < ...

  8. Prometheus教程

    Prometheus介绍 主要特征 使用时间序列数据(tsdb)的多维度数据模型 灵活的查询语言(PromQL) 不依赖分布式存储,单个节点是自主的 通过http请求拉取(pull)时间序列数据(ts ...

  9. 【读书笔记】C#高级编程 第十章 集合

    (一)概述 数组的大小是固定的.如果元素个数是动态的,就应使用集合类. List<T>是与数组相当的集合类.还有其它类型的集合:队列.栈.链表.字典和集. (二)列表 1.创建列表 调用默 ...

  10. 【原创】K8S环境下研发如何本地调试？kt-connect使用详解

    K8S环境下研发如何本地调试?kt-connect使用详解 背景 注:背景有点啰嗦,讲讲一路走来研发本地调试的变化,嫌烦的可以直接跳过,不影响阅读. 2019年 我在的公司当时是个什么情况,只有两个J ...