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>中。

整个输入输出参数在一个页面呈现，实现效果如下：


iframe 操作顶级框架的内容 jquery iframe框架实例_Jsp

一个页面呈现

当有需要在一个页面调试，看到完整输入输出参数的情况时，用iframe非常合适。