关于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标签其中的一个功能就是父页面可以包含多个子页面，且子页面直接的操作互不影响，后面只需要把子页面的值传给父页面，父页面就可以进行下一步操作了；