[转]javascript对iframe的互操作浅析

 
 
 单日志页面显示设置
 关闭 
网易首页网易博客 
博客首页博客拍拍精美风格博客圈子博客活动娱乐中心找 朋 友博客复制手机博客短信写博意见反馈更多
>>  搜 索登录 |  注册  
tangjiajia121的博客
枫叶丹的技术支持中心  首页 日志 相册 音乐 收藏 博友 关于我    
   
 
 
 
 
 
 
 很抱歉,因为您在网易相册发布了违规信息,账号被屏蔽。被屏蔽期间他人无法访问您的相册。
去帮助中心,了解如何重新恢复服务。
  日志
 
 
javascript realplayer
window media player 参数
 javascript对iframe的互操作浅析 
javascript   
2009 - 10 - 16   18 : 17    阅读66   评论0   字号: 大大  中中  小小 下面对iframe的所有操作都是在同一个域下进行,暂不考虑跨域调用]

iframe元素也就是文档中的文档,或者好像浮动的框架(frame)。关于iframe的操作一直是一个疑难点,网上有很多这方面的文章介绍。下面我结合自己的经验,整理一下笔记记录下来。

一、页面

三个页面:父页面和两个子页面,两个子页面在父页面的两个iframe里。

1 、父页面MainForm.aspx

Code

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " MainForm.aspx.cs "  Inherits = " Test.MainForm "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml " >

< head runat = " server " >

    
< title >< / title>

< / head>

< body >

    
< form id = " form1 "  runat = " server " >

    
< div >

        
< ul >

            
< li >

                父页面(文本失去焦点可看结果):
< input id = " txtParent "  name = " txtParent "  type = " text "  value = " parent "  onblur = " iframeTest() "   / >

            
< / li>

            
< li >

                
< iframe src = " FrameA.aspx "  id = " iframeA " >< / iframe>

            
< / li>

            
< li >

                
< iframe src = " FrameB.aspx "  id = " iframeB " >< / iframe>

            
< / li>

        
< / ul>

    
< / div>

    
< script type = " text/javascript " >

        
function  iframeTest() {

        }

    
< / script>

    
< / form>

< / body>

< / html>

2 、子页面A

Code

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " FrameA.aspx.cs "  Inherits = " Test.FrameA "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml " >

< head runat = " server " >

    
< title >< / title>

    
< script type = " text/javascript " >

        
// 子页面与父页面之间的操作  

        
function  getParent() {

        }

        
// 当前子页面与另外一个子页面之间的操作

        
function  getAnotherChild() {

           

        }

    
< / script>

< / head>

< body >

    
< form id = " form1 "  runat = " server " >

    
< div >

         子页面1(文本失去焦点可看结果):
< input id = " txtUserName "  name = " txtUserName "  type = " text "  value = " jeff wong "  onblur = " getParent() "   / >

    
< / div>

    
< / form>

< / body>

< / html>

3 、子页面B

Code

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " FrameB.aspx.cs "  Inherits = " Test.FrameB "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml "   >

< head runat = " server " >

    
< title >< / title>

< / head>

< body >

    
< form id = " form1 "  runat = " server " >

    
< div >

        子页面2(文本失去焦点可看结果):
< input id = " txtUserNameB "  name = " txtUserNameB "  type = " text "   value = " jeffery zhao "/ >

    
< / div>

    
< / form>

< / body>

< / html>


二、操作

1 、父页面操作子页面

这个毫无疑问要在父页面MainForm.aspx文件里实现。我们修改父页面的javascript函数iframeTest,看父页面如何获取和操作子页面元素的:

Code

        
function  iframeTest() {

            
var  frame1  =  document.getElementById( " iframeA " );

            
var  frame2  =  document.getElementById( " iframeB " );

            
var  frameA  =  document.frames[ " iframeA " ];  // 等价于 var frameAa = document.frames.iframeA;

            
var  frameB  =  document.frames[ " iframeB " ];  // 等价于 var frameBb = document.frames.iframeB;

            
// **********************************************

            alert(frame1 
==  frameA);  // false

            alert(frame2 
==  frameB);  // false

            alert(frame1.src); 
// FrameA.aspx

            alert(frame1.location); 
// undefined

            alert(frameA.src); 
// undefined

            alert(frameA.location); 
// location

            alert(frameA.document.location);

            alert(frame1.document.body.innerHTML); 
// 这里返回的是MainForm.aspx的body里的innerHTML

            alert(frame1.document.documentElement.innerHTML); 
// 这里返回的是MainForm.aspx的html里的innerHTML

            alert(frameA.document.body.innerHTML); 
// 这里返回的是FrameA.aspx的body里的innerHTML

            alert(frameA.document.documentElement.innerHTML); 
// 这里返回的是FrameA.aspx的html里的innerHTML

            
// **********************************************   

            
var  childFrameDoc  =  undefined;

            
// 取FrameA.aspx内的input文本

            
if  (document.all) { // IE

                childFrameDoc 
=  frameA.document;  // *** 如果是frame1,就取不到FrameA.aspx页面里的input ***

            } 
else  { // Firefox

                childFrameDoc 
=  frameA.contentDocument;

            }

            alert(childFrameDoc.body.innerHTML);

            
var  childTxt  =  childFrameDoc.getElementById( " txtUserName " );

            
var  childTxtByName  =  childFrameDoc.getElementsByName( " txtUserName " );

            alert(childTxt 
==  childTxtByName[ 0 ]);  // true

            alert(childTxt.value); 
// jeff wong

            alert(childTxtByName[
0 ].value);  //  jeff wong

            
// 取FrameB.aspx内的input文本

            childFrameDoc 
=  undefined;

            
if  (document.all) { // IE

                childFrameDoc 
=  frameB.document;

            } 
else  { // Firefox

                childFrameDoc 
=  frameB.contentDocument;

            }

            alert(childFrameDoc.body.innerHTML);

            
var  childTxt  =  childFrameDoc.getElementById( " txtUserNameB " );

            
var  childTxtByName  =  childFrameDoc.getElementsByName( " txtUserNameB " );

            alert(childTxt 
==  childTxtByName[ 0 ]);  // true

            alert(childTxt.value); 
// jeffery zhao

            alert(childTxtByName[
0 ].value);  //  jeffery zhao

        }

 小结:

a、通过iframe对象所在页面的对象模型(通过document.getElementById(
" iframeId " )获取),你可以访问iframe对象的属性,但不能访问其内容。

b、frames集合提供了对iframe内容的访问(通过document.frames[
" iframeName " ]获取)。通常情况下我们都使用frames集合读写iframe内包含的元素。

c、如果只想改变iframe的src或者border, scrolling等attributes(与property不是一个概念,property是不能写在标签内的,比如:scrollHeight,innerHTML等),就需要用到document.getElementById方法.

d、要想使用iframe内的函数或dom元素(比如想得到iframe的document.body的内容),变量就必须通过frames集合.因为它取的是一个完整的DOM模型,而通过id获取的方法只是取出了一个object而已.

e、如果在iframe的页面未完全装载的时候,调用iframe的dom模型,会发生错误.

2 、子页面操作父页面

这里以子页面FrameA.aspx举例。在子页面A中,我们通过函数getParent获取MainForm.aspx的dom元素,然后按照正常的dom元素操作就是了:

Code

        
// 子页面与父页面之间的操作  

        
function  getParent() {

            
if  (self  !=  top) {

                
var  oDoc  =  top.parent.document;

                alert(oDoc.body.innerHTML); 

                alert(oDoc.documentElement.innerHTML); 

                alert(oDoc.frames.length); 
// 返回结果:2  表明父页面有两个iframe

                
// 操作父页面的文本框

                
var  oTxt  =  oDoc.getElementById( " txtParent " );

                alert(oTxt.value);

            }

            
else  alert( " 不在框架中 " );

        }


3 、子页面操作子页面

这个还要借助主页面间接获取另一个子页面。这里还以子页面A来举例。通过主页面,我们间接获取了子页面B,然后像正常操作dom一样,子页面A完成对子页面B的控制和操作。

先修改getAnotherChild()函数:

Code

        
// 当前子页面与另外一个子页面之间的操作

        
function  getAnotherChild() {

            alert(self.location.href); 
// 当前页面的url

            
// 通过父页面,间接获取另外一个子页面

            
if  (self  !=  top) {

                
var  oDoc  =  top.parent.document;

                
var  oAnotherFrame  =  oDoc.frames[ " iframeB " ];  // 返回另外一个iframe

                alert(oAnotherFrame.location);

                alert(oAnotherFrame.document.body.innerHTML);

                alert(oAnotherFrame.document.documentElement.innerHTML);

                

                
var  oTxt  =  oAnotherFrame.document.getElementById( " txtUserNameB " );

                alert(oTxt.value); 
// jeffery zhao

            }

        }

 注意:修改完getAnotherChild()函数,然后将子页面A(FrameA.aspx)中的textUserName的onblur事件改为 onblur
= " getAnotherChild() " 就可以看到结果了.

你可能感兴趣的:([转]javascript对iframe的互操作浅析)