首页 > 代码库 > iframe相关知识

iframe相关知识

2024-07-24 05:49:59   227人阅读

iframe

      不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦.一般通过百分比设置显示。（简单的java开发应用）

iframe的属性

 

属性值描述DTD
align
  • left
  • right
  • top
  • middle
  • bottom

不赞成使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。

TF
frameborder
  • 1
  • 0
规定是否显示框架周围的边框。TF
height
  • pixels
  • %
规定 iframe 的高度。TF
longdescURL规定一个页面，该页面包含了有关 iframe 的较长描述。TF
marginheightpixels定义 iframe 的顶部和底部的边距。TF
marginwidthpixels定义 iframe 的左侧和右侧的边距。TF
nameframe_name规定 iframe 的名称。TF
scrolling
  • yes
  • no
  • auto
规定是否在 iframe 中显示滚动条。TF
srcURL规定在 iframe 中显示的文档的 URL。TF
width
  • pixels
  • %
定义 iframe 的宽度。TF

 

IFRAME的简单示例。用于java同一页面上下显示。

 

 1 <script type="text/javascript"> 2  3  4     //当触发该js方法，则会给iframe的src设置一个新的地址，iframe会自动请求该地址，并响应回新的页面，从而实现了看似同一页面的不同刷新 5     function seach(){ 6         //获取用户名 7         var sysUserName=$("#sysUserName").val().trim(); 8         var handle=$("#handle").val().trim(); 9         var startDate=$("#startDate").val().trim();10         var endDate=$("#endDate").val().trim();11         12         if(startDate.length==0&&endDate.length>0){13             alert("请选择起始时间");14             return ;15         }16         17         if(endDate.length==0&&startDate.length>0){18             alert("请选择终止时间");19             return ;20         }21 22         var url="<%=request.getContextPath()%>/master/sysLog_querySysLog.action?sysUserName="+sysUserName+"&handle="+handle+"&startDate="+startDate+"&endDate="+endDate;23 24         $("#myIframe").attr("src",url);25         26     }27 </script>28 29 </head>30 <body>31     <div class="place">32     <span>位置：</span>33     <ul class="placeul">34     <li><a href="#">日志</a></li>35     <li><a href="#">日志管理</a></li>36     </ul>37     </div>38     39     <div class="formbody">40          <div class="tools">41             <ul class="toolbar">42             <li class="click">43                  用户名：<input type="text" id="sysUserName" name="sysUserName" class="dfinput" style="width: 100px;"/>44             </li>45             <li class="click">46                 操作类型:47                 <select id="handle" name="handle">48                     <option value="">--请选择--</option>49                     <option value="1">添加</option>50                     <option value="2">删除</option>51                     <option value="3">修改</option>52                     <option value="4">登录</option>53                     <option value="6">导出/打印</option>54                 </select>  55            </li>56            <li class="click">57                 起始时间：58                 <input type="text" id="startDate" class="dfinput" onfocus="WdatePicker({maxDate:‘#F{$dp.$D(\‘endDate\‘)||\‘2020-10-01\‘}‘})" style="width: 130px;"/> 59            </li>60            <li class="click">61                 终止时间：62                 <input type="text" id="endDate" class="dfinput" onfocus="WdatePicker({minDate:‘#F{$dp.$D(\‘startDate\‘)}‘,maxDate:‘2020-10-01‘})" style="width: 130px;"/> 63            </li>64            65             <li onclick="seach();"><span><img src="<%=request.getContextPath() %>/master/images/t04.png"></span>查询</li>66 67             </ul>68             </div>69      70    </div>71     <iframe  src="<%=request.getContextPath() %>/master/sysLog_querySysLog.action" scrolling="yes" id="myIframe" width="100%" height="90%" onl oad="iFrameHeight(this)"></iframe>72 </body>73 </html>
View Code

 

iframe相关知识


联系
我们