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>

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

相关文章
|
3月前
|
安全 搜索推荐 UED
什么是iframe?请讲述一下iframe框架的优缺点?
什么是iframe?请讲述一下iframe框架的优缺点?
44 0
|
4月前
iframe几种常用代码片段
iframe几种常用代码片段
|
10月前
|
安全 定位技术
什么是iframe?请讲述一下iframe的优缺点?
什么是iframe?请讲述一下iframe的优缺点?
58 0
|
Python
Selenium中操作iframe,别再说你不会了
Selenium中操作iframe,别再说你不会了
146 0
|
Web App开发 缓存 应用服务中间件
解决如何知道iframe下载完成 #92
解决如何知道iframe下载完成 #92
247 0
|
JavaScript 搜索推荐 SEO
iframe简要介绍
iframe简要介绍
283 0
iframe简要介绍