基本的操作方法:
document.frames("frame_id").document.action;
其中,frame_id是该父页面需要进行操作的iframe的id,action是iframe中的相关操作。
从该方法中,可以看出 document.frames("frame_id")是用来从父页面中获取iframe的id的,而后面的document.action同一般的脚本对页面元素操作一样,具体举个例子来说明一下,其中父页面引用iframe部分如下:
- <div id="region1" name="region1">
- <iframe οnlοad="iframe_test()" frameborder="0" scrolling="no" width="100%" height="500" name="test_iframe" id="test_iframe" src="/testIframe.jsp" mce_src="testIframe.jsp"></iframe>
- </div>
- testIframe.jsp如下:
- <%@ 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脚本如下:
- <mce: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"
- }
- }
- // --></mce:script>
此例描述了在父页面中读取iframe中元素以及在父页面中修改iframe中元素的属性。
通过此例,我们可以看出,在父页面中访问iframe中的各个元素与一般的访问页面元素无本质区别,无非是需要在父页面中事先获取需要处理的iframe对象,在获取iframe对象后,其操作基本没什么特别之处。