IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。
iframe 的优缺点
优点:
重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少数据的传输,减少网页的加载时间);
技术简单,使用方便,主要应用于不需要搜索引擎来搜索的页面;
方便开发,减少代码的重复率(比如页面的header,footer);
缺点:
会产生很多的页面,不易于管理;
不易打印;
多框架的页面会增加服务气得http请求;
浏览器的后退按钮无效等;
由于诸多的缺点,不符合标准网页设计的理念,已经被抛弃,目前的HTML5不再支持此标签
有时,我们需要在一个测试页面;把输入和输出参数都打印出来。而不需要跳转到另外一个页面的时候。iframe在这个时候就显得尤为重要了。
且看以下例子:
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>****交易接口测试页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function selectInterface_test() {
document.getElementById("input").src=document.getElementById("interfaces").value;
}
</script>
</head>
<body>
<p style="text-align:center">
<select id="interfaces" name="interfaces" onchange="selectInterface_test()">
<option>------测试环境选择接口-------</option>
<option value="payCreate.jsp">统一下单支付接口</option>
<option value="wechatH5.jsp">微信H5支付接口</option>
<option value="wechatJsApi.jsp">微信JS支付接口</option>
<option value="aliJsApi.jsp">支付宝服务窗支付接口</option>
<option value="mainScanning.jsp">主扫支付接口</option>
<option value="scanning.jsp">被扫支付接口</option>
<option value="splitOrder.jsp">分账接口</option>
<option value="unionPay.jsp">网银支付接口</option>
<option value="withdrawalToCard.jsp">单笔代付接口</option>
<option value="queryCreate.jsp">订单查询接口</option>
<option value="refundCreate.jsp">退款接口</option>
<option value="refundQueryCreate.jsp">退款交易查询接口</option>
<!-- <option value="repealCreate.jsp">订单撤销接口</option> -->
</select>
</p>
<p style="text-align:center">
选择接口
---------------------------------------------------我是分割线---------------------------------------------------
参数打印
<br>
</p>
<iframe style="width:48%;height:90%" name="input" id="input"></iframe>
<iframe style="width:48%;height:90%" name="output" id="output"></iframe>
</body>
</html>
这里的关键点在:
<iframe style="width:48%;height:90%" name="input" id="input"></iframe>
<iframe style="width:48%;height:90%" name="output" id="output"></iframe>
以及
<script type="text/javascript">
function selectInterface_test() {
document.getElementById("input").src=document.getElementById("interfaces").value;
}
</script>
在<select>的<option>里面选中选项后,通过js函数获取对应第一个<iframe>中input得到的标签id属性值,然后再在<option>相应子页面target="output"到第二个<iframe>中。
其中某个子页面:
<option value="payCreate.jsp">统一下单支付接口</option>
....
<body>
<form name="frmPost" action="/***-test/**Action" target="output" method="post">
</body>
这样,当***Action后台service处理完后,返回信息直接output输出到第二个<iframe>中。
整个输入输出参数在一个页面呈现,实现效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/19180b63560d33ee7d0ed37bcefb0093.png)
当有需要在一个页面调试,看到完整输入输出参数的情况时,用iframe非常合适。
![](https://i-blog.csdnimg.cn/blog_migrate/bdc6066fe11a0405dd5d289a2b39bb24.jpeg)