iframe简单使用实例

原创
2018/12/07 16:12
阅读数 70

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

 

同名原创公众号: 程序大视界

 

本文同步分享在 博客“程序大视界”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部