JavaScript iframe的相互操作浅析


Posted in Javascript onOctober 14, 2009

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

<%@ 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

<%@ 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

<%@ 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,看父页面如何获取和操作子页面元素的:

        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元素操作就是了:

 

        //子页面与父页面之间的操作  
        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()函数:

 

        //当前子页面与另外一个子页面之间的操作
        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 相关文章推荐
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
JavaScript之自定义类型
May 04 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 #Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 #Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 #Javascript
jquery 常用操作整理 基础入门篇
Oct 14 #Javascript
一些技巧性实用js代码小结
Oct 14 #Javascript
Jquery 学习笔记(一)
Oct 13 #Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 #Javascript
You might like
Banner程序
2006/10/09 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
详解Python中的文本处理
2015/04/11 Python
python使用mysql的两种使用方式
2018/03/07 Python
python实现猜拳小游戏
2020/04/05 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
会计专业自荐信
2014/06/03 职场文书
工会积极分子个人总结
2015/03/03 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
在Python中如何使用yield
2021/06/07 Python