zoukankan      html  css  js  c++  java
  • 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属性来跳出当前框架,并转到所有子框架的公有框架中,以上例子中的LeftFrameRightFrame可以用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的输入框会跟着做相应的变化

  • 相关阅读:
    construction of tuples containing 0 or 1 items
    globals()
    __new__
    ubuntu系统安装mysql登陆提示 解决Mysql ERROR 1045 (28000): Access denied for user 'root'@'localhost'问题
    ubuntu系统更新源
    Python Web开发问题收集(二)
    linux后台执行./run.py提示python syntax error near unexpected token `('
    linux下执行scrapy的爬虫定时任务
    ubuntu系统中crontab的使用介绍
    JMeter BeanShell断言使用
  • 原文地址:https://www.cnblogs.com/keithmoring/p/4225048.html
Copyright © 2011-2022 走看看