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>

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

相关文章
|
7月前
iframe几种常用代码片段
iframe几种常用代码片段
|
7月前
|
JavaScript
js实现iframe框架的面包屑功能
js实现iframe框架的面包屑功能
|
安全 定位技术
什么是iframe?请讲述一下iframe的优缺点?
什么是iframe?请讲述一下iframe的优缺点?
88 0
|
JavaScript 安全
原生JS路由,iframe框架
原生JS路由,iframe框架
|
Web App开发 缓存 应用服务中间件
解决如何知道iframe下载完成 #92
解决如何知道iframe下载完成 #92
270 0
|
设计模式 JavaScript 前端开发
【前端】JQuery框架 -- JQuery怎么使用和各个版本的区别、JQuery对象和JS对象区别、JQuery选择器
JQuery框架 -- JQuery怎么使用和各个版本的区别、JQuery对象和JS对象区别、JQuery选择器? jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
259 1
|
JavaScript 前端开发 API
iframe框架,原生js路由
该标签规定一个内联框架。被用来在当前 HTML 文档中嵌入另一个文档。 可以把需要的文本放置在 和 之间
203 0
|
Web App开发 JavaScript 前端开发
JavaScript 技术篇-js获取iframe内的元素方法实例演示
JavaScript 技术篇-js获取iframe内的元素方法实例演示
730 0
JavaScript 技术篇-js获取iframe内的元素方法实例演示