以往一直在编写的都是前台的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. 小程序movable-area置于顶层遮盖下方元素无法操作的解决方案

    小程序项目中有个需求,右下角按钮可以在页面中随意拖动,此时查看文档找到了一个自带的标签可以实现此功能,代码如下 <movable-area> <movable-view x=&quo ...

  2. 【JVM】-NO.113.JVM.1 -【JDK11 HashMap详解-0-全局-put】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  3. spring-boot 速成(2) devtools之热部署及LiveReload

    JRebel热部署插件相信很多人都知道,但是这是一款商业插件,spring-boot框架也提供了类似的功能,即:devtools,关键是免费的! 使用方法如下: 一.添加 devtools依赖 dep ...

  4. [LeetCode] 系统刷题3_Binary search

    可以参考 [LeetCode] questions conclusion_ Binary Search

  5. 《linux就该这么学》第五节课,shell脚本的各种语句!

    第四章shell语句 (据课本和虚拟机实验排版,借鉴请改动)               4.2:shell脚本   脚本包括:脚本声明,脚本注释,脚本内容和命令 例:#!/bin/bash      ...

  6. 探讨JS合并两个数组的方法

    我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况. 比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合并成一个.方法如下: ...

  7. 基于Groovy+HttpRestful的超轻量级的接口测试用例配置的设计方案及DEMO实现

    目标 设计一个轻量级测试用例框架,接口测试编写者只需要编写测试用例相关的内容(入参及结果校验),不需要理会系统的实现,不需要写跟测试校验无关的内容. 思路 测试用例分析 一个用例由以下部分组成: (1 ...

  8. Linux基础命令---accept/reject 允许拒绝发送打印请求

    accept accept指令用来设置允许向目标打印机发送打印任务. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.   1.语法      cupsaccept ...

  9. Docker Kubernetes YAML文件常用指令

    YAML文件常用指令 配置文件说明: 定义配置时,指定最新稳定版API(当前为v1). 配置文件应该存储在集群之外的版本控制仓库中.如果需要,可以快速回滚配置.重新创建和恢复. 应该使用YAML格式编 ...

  10. Python assert断言

    assert断言:指定某个对象判断类型,不成立则报错. 使用环境  :接下来程序的执行,如果依赖前面的类型,不能报错的情况下使用. assert type(obj) is str print(&quo ...