快捷導(dǎo)航

從父頁面讀取和操作iframe中內(nèi)容方法

更新時(shí)間：2009年07月25日 14:07:56 作者：

在父頁面中訪問iframe中的各個元素與一般的訪問頁面元素?zé)o本質(zhì)區(qū)別，無非是需要在父頁面中事先獲取需要處理的iframe對象，在獲取iframe對象后，其操作基本沒什么特別之處。

基本的操作方法：
document.frames("frame_id").document.action;
其中，frame_id是該父頁面需要進(jìn)行操作的iframe的id，action是iframe中的相關(guān)操作。
從該方法中，可以看出 document.frames("frame_id")是用來從父頁面中獲取iframe的id的，而后面的document.action同一般的腳本對頁面元素操作一樣，具體舉個例子來說明一下,其中父頁面引用iframe部分如下：

復(fù)制代碼代碼如下:

 
<div id="region1" name="region1"> 
<iframe onload="iframe_test()" frameborder="0" scrolling="no" width="100%" height="500" name="test_iframe" id="test_iframe" src="/testIframe.jsp" src="testIframe.jsp"></iframe> 
</div> 

testIframe.jsp如下：

復(fù)制代碼代碼如下:

 
<%@ page language= "java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 
<html> 
<head> 
<title>test_iframe</title> 
</head> 
<body> 
<table class="data_form" align="center"> 
<tr> 
<th>testname</th> 
<td><input name="testname" type="text" id="testname" value="testname" ></td> 
</tr> 
<tr> 
<th>description</th> 
<td><input name="decription" type="text" id="decription" value="testname" /></td> 
</tr> 
</table> 
<br> 
<div > 
<input name="fs" type="submit" id="fs" value="test" onClick="alert('test');" class="button"> 
</div> 
</body> 
</html> 

父頁面中對iframe元素操作的script腳本如下：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"><!-- 
function iframe_test(){ 
if (document.frames("test_iframe").document.getElementById("testname").value=="testname") 
{ 
alert("test successful!"); 
} 
if(document.frames("test_iframe").document.getElementById("decription").value=="") 
{ 
document.frames("test_iframe").document.getElementById("decription").value="description" 
} 
} 
// --></script> 

此例描述了在父頁面中讀取iframe中元素以及在父頁面中修改iframe中元素的屬性。

通過此例，我們可以看出，在父頁面中訪問iframe中的各個元素與一般的訪問頁面元素?zé)o本質(zhì)區(qū)別，無非是需要在父頁面中事先獲取需要處理的iframe對象，在獲取iframe對象后，其操作基本沒什么特別之處。