javaScript学习（4）框架学习

javaScript学习4

1.框架

在一个普通HTML文档载入浏览器的同时还创建了一个模型，这个模型始于一个window对象和它包含的文档。单框架窗口和文档很很简单，window下就是document。如果框架文档载入浏览器时就会建立一个稍微不同一样的层次模型。

<html>
<frameset cols="50%,50%">
    <frameset name="leftFrame" src="js_06.html"></frameset>
    <frameset name="rightFrame" src="js_05.html"></frameset>
</frameset>
</html>

1.1 父到子的引用

父窗口中包含两个或多个框架，就是说父窗口包含子框架对象的一个数组。可以通过数组语法或者框架名定位一个框架，框架名可以用<frame>标记中的name属性来进行设置。

[window.]frames[n].objFuncVarName
[window.]frames["frameName"].objFuncVarName
[window.]frameName.objFuncVarName

1.2 子到父的引用

从子框架的角度来看，它的上一层称为parent（父层），因为从子框架到父层的元素的引用很简单parent.objFuncVarName

1.3 子到子的引用

任何窗口或者框架都拥有parent属性，引用必须使用parent属性来跳出当前框架，并转到所有子框架的公有框架中，以上例子中的LeftFrame到RightFrame可以用parent,这样和父到子引用是一样的

parent.frames[n].objFuncVarName

获得载入框架的document对象，由于浏览器的不同调用不同，IE4+和Safari使用与窗口相同，而MOzilla浏览器更严格遵循W3C DOM标准，使用comentDocument属性

var docObj;
var frameObj=document.getElementById("myFrame");
if(frameObj.contentDocument){
    docObj=frameObj.contentDocument;    
}else{
    docObj=frameObj.document;    
}

1.4 多窗口引用

window.open()方法返回window对象引用创建了一个新窗口并与它通信。

每个window对象都有一个opener的属性，该属性包含窗口和框架的引用，这些窗口或者框架存放一些脚本，脚本的window.open()语句生成子窗口。

我们可以这样编程
js_9.html代码如下：

<html>
<head>
    <title>js_9</title>
    <script type="text/javascript">    
        function newSubWindows(){
            window.open("js_10.html","sub","height=200,width200");
        }
    </script>
</head>
<body>
<form>
<input type="button" name="" value="create clone" onclick="newSubWindows()">
<p>there is word from subwindows</p>
<input type="text" name="">
</form>
</body>
</html>

js_10.html代码如下

<html>
<head>
    <title>js_10</title>
    <script type="text/javascript">  

    </script>
</head>
<body>
<form>
    <input name="second" type="text" onchange=" opener.document.forms[0].entry.value=this.value">
</form>
</body>
</html>

点击js_9的create clone，会弹出一个新窗口，在新窗口js_10中输入字符，js_9的输入框会跟着做相应的变化

posted @ 2015-01-14 22:37  KeithMorning  阅读(349)  评论(0)  编辑  收藏  举报