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异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
sails框架的学习指南
Dec 22 Javascript
js进行表单验证实例分析
Feb 10 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 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
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
php生成短域名函数
2015/03/23 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
python异常和文件处理机制详解
2016/07/19 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
合作协议书怎么写
2014/04/18 职场文书
三严三实对照检查材料
2014/08/25 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
2019思想汇报范文
2019/05/21 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫