以往一直在编写的都是前台的UI,很少使用到frameset、iframe,对其了解也是十分有限,只是知道其可以为其当前页面引入html文件成为当前页的一部分,但是这两天在做后台UI界面的时候,发现这样的框架也是有相当多知识点在里面的。那框架是啥?可以这样说:通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。那么关于框架,有几个方面是需要我了解的:

(1)获得html页面上的frame

  window.frames可以获得本页面上所有frame集合,用法与document.forms,document.imgs的用法相似,这是这里用的是window对象,获取某个框架可以这样做window.frames[0]、window.frames['frameName']、frames['frameName']、frames[0]、self.frames[0],此处self与window等价,相当于本页面的window对象。

这里也还要再看两个属性,contentWindow、contentDocument两个属性,也是可以用来获取子窗口,框架的window对象的。

contentWindow 兼容各个浏览器,可取得子窗口的 window 对象。

contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。

假如我要刷新本页面中第一个框架的页面,可以怎么做:

window.frames[0].contentWindow.location.reload();

(2)父框架调用子框架的变量或函数

结合上面说的获得页面上的frame,那么调用子框架的变量或是函数可以这样来:

frames[0].a;
frames[0].refresh();
alert(frames[0].location.href);

这是调用第一个框架里面的a变量和refresh函数。

(3)子框架调用父框架的变量或函数

对于子框架调用父框架的这种情况下,window有个属性叫parent,用来调用上层框架的,所以可以这样来:

window.parent.a;
window.parent.refresh();

这是调用子框架调用父框架的a变量和refresh函数。

(4)兄弟框架之间的调用

可以通过它们的父框架来相互调用,可以这样做

self.parent.frames['child1'];
self.parent.frames['child2'];

(5)多层框架的调用

window.frames[0].frames[2];
window.frames['child_1'].frames['sub_child_3'];

(6)顶层框架

首先需要判断是否为顶层框架,也就是根,可以这样来做:

if(self==window.top){
//....
}
/*window的另外一个属性top,它表示对顶层框架的引用,这可以用来判断一个框架自身是否为顶层框架*/

基本关于frameset和iframe之间的互相调用知识点就这些,这个嘛,忽略,http://t.cn/RUbL4rP

frameset,iframe框架之间如何互相调用变量、函数的更多相关文章

  1. iframe框架加载完成后执行函数

    var iframe = document.createElement("iframe"); iframe.src = "http://www.baidu.com/&qu ...

  2. iframe 框架 父页面与子界面之间的变量、函数、元素获取

    1.获取页面上的iframe 1-1. document.getElementById('iframeId'): 1-2. window.frames[0].window.frames['frameN ...

  3. Javscript调用iframe框架页面中函数的方法

    Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...

  4. html iframe 元素之间的调用

    html iframe 元素之间的调用一.简介 一般需要引入一个独立页面的时候,我们会使用iframe.在业务需要的时候,我们需要在父页面与iframe页面之间进行交互.交互的时候,我们就需要使 用到 ...

  5. C#与Javascript变量、函数之间的相互调用

    原文地址:http://blog.csdn.net/wonsoft/article/details/2595743 C#与Javascript变量.函数之间的相互调用  一.javascript调用C ...

  6. 防止木马利用iframe框架来调用外域JS代码

    <!--防止木马利用iframe框架来调用外域JS代码,不过滤自己网站的域名的框架网页开始--><SCRIPT LANGUAGE="JavaScript"> ...

  7. [tty与uart]1.Linux中tty框架与uart框架之间的调用关系剖析

    转自:http://developer.51cto.com/art/201209/357501_all.htm 目录 1.tty框架 2.uart框架 3.自底向上 4.自顶向下 5.关系图 在这期间 ...

  8. 取代iframe框架

    一.frameset1. 属性①border设置框架的边框粗细.②bordercolor设置框架的边框颜色.③frameborder设置是否显示框架边框.设定值只有0.1:0 表示不要边框,1 表示要 ...

  9. flex集成IFrame,IFrame集成UnityWebPlayer直接通讯调用解决方式

    做Web开发一般是flex与JS交互,UnityWebPlayer与JS交互. 它们之间相互调用比較常见. /** * Flex调用Javascript函数 * @params functionNam ...

随机推荐

  1. pprint

    pprint = pretty printer 经常用来打印 字典.json 打印出的格式会是较为标准的格式 目的:方便调试,查看中间结果,因为觉得设断点调试相对麻烦. [运行环境:macOS 10. ...

  2. 家庭记账本之微信小程序(七)

    最后成果 在经过对微信小程序的简单学习后,对于微信小程序也稍有理解,在浏览学习过别人的东西后自己也制作了一个,觉得就是有点low,在今后的学习中会继续完善这个微信小程序 //index.js //获取 ...

  3. angularjs 绑定多个属性到下拉框

    绑定下拉框 angularjs  代码: //活动下拉切换 $scope.activityChange = function () { var cards = new Array(); var url ...

  4. day08 python之函数初识

    一,什么是函数? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print(),len( ...

  5. nginx--service配置

    nginx从今天开始进行相关学习了,包括:1.注册centos的service服务:2.相关的tomcat负载:3.https配置:4.session共享配置 1.注册centos的service服务 ...

  6. Filter中request对象强转问题

    以下为过滤器doFIlter方法的源代码: public void doFilter(ServletRequest request, ServletResponse response, FilterC ...

  7. vue-i18n使用ES6语法以及空格换行问题

    1.运行报错 报错使用了不恰当的exports Uncaught TypeError : Cannot assign to read only property 'exports ' of objec ...

  8. Dart编程语言入门

    Dart基础入门语法介绍,详细说明可以查看相关视频<Dart编程语言入门>. 变量与常量 变量 1.使用 var 声明变量,默认值为 null var a;//null a = 10; 2 ...

  9. php 去除变态空格字符方法,空格trim不掉问题解决思路

    前言:今天过滤一段文本,后面有2个空格,用trim去不掉,用preg_match也去不掉,去网上翻阅了无数的方法,终于找到了非常好的一个解决方法.该文章来源于https://my.oschina.ne ...

  10. DataFrame数据转为list,再逐行写入Excel

    首先使用np.array()函数把DataFrame转化为np.ndarray(), 再利用tolist()函数把np.ndarray()转为list, 示例代码如下: # -*- coding:ut ...