iframe简单使用实例

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非常合适。

关注个人技术公众号：nick_coding1024

不定期分享最新前沿技术框架和bat大厂常用技术等，加群不定期分享行业内大牛直播讲课以及获得内退一线互联网公司机会。

iframe简单使用实例

猜你喜欢