iframe的简单使用

简介: 这篇文章通过一个简单的Maven项目示例,演示了如何使用`iframe`标签进行页面跳转和局部数据刷新,以及`a`标签的`target`属性与`iframe`的`name`属性如何配合使用来实现链接在`iframe`中的加载。

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

局部数据的刷新:可以使用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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章
|
19天前
轻量级消息弹框HTML源码
轻量级消息弹框插件特效源码是一段不错的消息弹框代码,支持设置通知类型、动画、字体、位置等等属性,可定制程度较高,进行适当扩展等,欢迎对此段代码感兴趣的朋友参考使用。
27 0
轻量级消息弹框HTML源码
|
6月前
iframe几种常用代码片段
iframe几种常用代码片段
|
6月前
|
JavaScript
js实现iframe框架的面包屑功能
js实现iframe框架的面包屑功能
|
安全 定位技术
什么是iframe?请讲述一下iframe的优缺点?
什么是iframe?请讲述一下iframe的优缺点?
81 0
|
Web App开发 缓存 应用服务中间件
解决如何知道iframe下载完成 #92
解决如何知道iframe下载完成 #92
263 0
|
Web App开发 JavaScript API
layer官方演示与讲解(jQuery弹出层插件)
1. 使用layer遇到困难?Fly社区虔诚为您解惑 2. layer 2.0 发布,以独立形式呈现的最后一个版本 3. Fork layer on Github,爱她,就给她加个星啵 当前版本:2.0(2015-09-01更新) ://github.com/sentsin/layer 大小:40KB,下载次数:124689 一些唠叨 在线调试 快速上手 前往旧版1.8.5 layer是一款近年来口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
1721 0
|
前端开发 JavaScript Java
html2canvas+jQuery+SpringMVC 实现网页转图片并保存到服务器
前端使用的是 RequireJS + jQuery 后端使用的是 SpringMVC + MyBatis 涉及资料 html2canvas 官网 将转换后的图片存储服务器的参考 将网页转换为图片 下载插件包 html2canvas 目前最新版是 v-1.
3216 0
|
Web App开发 JavaScript 前端开发