iframe框架使用

小玉的飞猪

已于 2024-01-25 22:12:47 修改

阅读量316

点赞数 3

分类专栏：拿来主义系列文章标签：前端 iframe jsp

于 2024-01-25 22:11:05 首次发布

本文链接：https://blog.csdn.net/jishuai6p/article/details/135854165

版权

拿来主义系列专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、什么是iframe框架

通俗讲就是将一个页面嵌入另一个页面，可以是本地的html,jsp也可以是网址如baidu.com

二、怎么用？

<iframe name="uploadPage" src="/uploadImg.html" width="100%" height="50" marginheight="0" marginwidth="0" scrolling="no" frameborder="0"></iframe>

<iframe name="uploadPage" src="uploadImg.jsp" width="100%" height="50" marginheight="0" marginwidth="0" scrolling="no" frameborder="0"></iframe>

<iframe src="http://www.bootcss.com/" onload="changeFrameHeight()" id="myiframe" scrolling="yes" frameborder="0">
    </iframe>

上面三个分别是引入html页面，jsp以及网页，如果是ssm项目且两个页面在同一目录下直接uploadImg.jsp就行了，不然写全相对路径，如果是springboot项目将需要引入的页面放入static静态资源文件中，然后src后面放/uploadImg.html即可。

三、引入页面的跳转

每个页面都在自己的框里面跳转：

<form action="" target="uploadPage"> target后面就是指定的iframe的name属性值

四、模板

1-可移动的框(在iframe外面加个p标签，移动p标签的位置即可)

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
</head>
<body>
<p class="main">
    <iframe src="http://www.bootcss.com/" onload="changeFrameHeight()" id="myiframe" scrolling="yes" frameborder="0">
    </iframe>
    </p>
    </body>

<style type="text/css">
    *{ padding: 0; margin: 0;}
    body{background: green}
    .main{ width: 80%; height: 500px; margin: 0 auto;}
    .main iframe{ display: block; width:100%; height: 100%;}
    </style>