zoukankan      html  css  js  c++  java
  • 关于iframe 的相关用法和解释

    iframe 标签 是一种内联框架 用来包含别的页面的

    iframe 标签的属性:

    frameborder:1、0。用于规定是否显示框架周围的边框。

     height:pixels、%。用于规定iframe的高度。

     longdesc:URL。规定一个页面,该页面包含了有关iframe的较长描述。 //可以不写

      marginheight:pixels。定义iframe的顶部和底部的边距。

      marginwidth:pixels。定义iframe的左侧和右侧的边距。

       name:frame_name。规定iframe的名称。

       scrolling:yes、no、auto。规定是否在iframe中显示滚动条。

       src:URL。规定在iframe中显示的文档的URL。 //必须要写

       width:pixels。%。定义iframe的宽度。

    iframe 标签  出现在父页面,里面src 后面的 url是显示子页面的路径,用iframe标签 可是实现 同一个父页面中,多个子页面,且子页面直接不影响;

    iframe  父页面获取子页面值得方法

    1,在父页面

    <body>
              <!--父页面的iframe标签,其中src 的url为获取子页面的路径 -->
                 <iframe id="keychiledframe" name="keychiledframe"
                 src="${pageContext.request.contextPath}/keyDist/goAddKeyList?pageNoKey=1&pageNoUser=1"
                 width="100%" height="400px"
                 style="border: 0" overflow-x: hidden; overflow-y: hidden;" >
                 </iframe>
    <!--父页面的iframe标签,其中src的url为获取子页面的路径 --> <iframe id="userchiledframe" name="userchiledframe" src="${pageContext.request.contextPath}/keyDist/goAddUserList?pageNoKey=1&pageNoUser=1" width="100%" height="300px" style="border: 0" overflow-x: hidden; overflow-y: hidden;" > </iframe> </div> <div class="userbind_btn"> <button class="fl round button" id="save"><spring:message code="keyDistAdd.ensure" /></button> <button class="fl round button" id="cancel"><spring:message code="keyDistAdd.calloff" /></button> </div> </div> <script type="text/javascript"> //左边菜单下拉 jQuery(".cont_left_nav").slide({ titCell : "h3", targetCell : ".nav_drop", trigger : "click" }); var keyid = ""; var account="";

    //供子页面调用,得到钥匙和用户的值 function keyids(msg1){ keyid=msg1; //alert(keyid); } function userAccount(msg2){ account=msg2; //alert(msg2); } </script> </body>

     子页面

    <body style="background: #f3f4f8; overflow: hidden;">
    
    				<div class="daily_table" id="daily_table_id">
    					<table width="100%" border="0" cellpadding="0" cellspacing="0">
    						<tr class="daily_tr1">
    							<td><spring:message code="deviceDoorAdd.option" /></td>
    							<!-- <input type="checkbox" name="checkbox_all" id="checkbox_all" onclick="javascript:checkSelectAll(this);"/> -->
    							<td><spring:message code="keyDistAdd.identification" /></td>
    							<td><spring:message code="keyDistAdd.keyBKey" /></td>
    							<td><spring:message code="keyDistAdd.addtime" /></td>
    						</tr>
    						<c:forEach var="record" items="${pageData.data}">
    							<tr for="${record.keyId}">
    								<td class="keyD_td1">
    								<input type="radio" id="${record.keyId}" name="KeyRadio" value="${record.keyId }">
    								</td>
    								<td class="keyD_td2">${record.bluetoothId }</td>
    								<td class="keyD_td4">${record.bkey }</td>
    								<td class="keyD_td5">${record.createTime }</td>
    							</tr>
    						</c:forEach>
    					</table>
    				</div>
    	<script type="text/javascript">
    
    		//单机单选框时 生成要是信息返回给父页面;
    		$('input[name="KeyRadio"]').click(function(e){
    			 var arrChk=$("input[name='KeyRadio']:checked");
    			    //遍历得到每个checkbox的value值
    			    var selectedIdStr = $(this).val();
    			    if(""==selectedIdStr)
    			    {
    			    	layer.msg('<spring:message code="keyDistAdd.choosekey" />', 
    			      		   	  {
    			      	             icon: 0,
    			      	             time: 2000
    			      	         }, function()
    			      	         {   
    			      	        	 $("#checkbox_all").focus();
    			      	         });
    			    	return false;
    			    } 
    			window.parent.keyids(selectedIdStr); //调用父页面的方法,将该页面的值传过去
    		});
    	</script>
    </body>
    </html>
    

      

    这样 父页面就拿到了子页面传过来的值,可以进行后面的操作;

    总结:iframe标签其中的一个功能就是 父页面可以包含多个子页面,且子页面直接的操作互不影响,后面只需要把子页面的值传给父页面,父页面就可以进行下一步操作了;

  • 相关阅读:
    golang删除数组某个元素
    golang用通道实现信号量,控制并发个数
    什么是ScaleIO中的forwards rebuild和backwards rebuild?
    SQL Server中的database checkpoint
    如何将thick provision lazy zeroed的VMDK文件转换为thick provision eager zeroed?
    LoadTestAgentResultsLateException in VS2010
    SQL Server Instance无法启动了, 因为TempDB所在的分区没有了, 怎么办?
    VMware vCenter中, 如何辩认虚机上Raw Device Mapping过了的一块物理磁盘?
    SQL Server AlwaysOn Setup Step-By-Step Guide
    TPC-E在populate测试Database时需要注意的一些事项
  • 原文地址:https://www.cnblogs.com/wumingxuanji/p/7508803.html
Copyright © 2011-2022 走看看