发布于 2016-09-12 21:08:55 | 17 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


下面对iframe的所有操作都是在同一个域下进行,暂不考虑跨域调用
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 iframe的相互操作浅析
Javascript 中的 Array 操作示例
javascript封装的sqlite操作类实例
Javascript中的apply()方法浅析
Javascript中的Callback方法浅析
Javascript动画的实现原理浅析
JavaScript中的字符串操作详解
对frameset、frame、iframe的js操作示例代码
JavaScript字符串的操作
深入浅析JavaScript中的arguments对象(强力推荐)
浅析JavaScript中的对象类型Object
JavaScript中对JSON对象的基本操作示例
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2015 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务