以往一直在编写的都是前台的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. Viewer.js插件浏览图片

    https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片

  2. [js]js中函数传参判断

    1,通过|| function fun(x,y){ x=x||0; y=y||1; alert(x+y); } fun(); 2.通过undefined对比 function fun(x,y){ if ...

  3. python数据结构-如何快速找到多个字典中的公共键

    如何快速找到多个字典中的公共键 问题举例 统计每轮都进球的球员: 第1轮{‘tom’:1, 'meixi':2} 第2轮{‘coco’:3, 'meixi':4, 'marton':2} 第3轮{'c ...

  4. 25个SSH命令

    OpenSSH是SSH连接工具的免费版本.telnet,rlogin和ftp用户可能还没意识到他们在互联网上传输的密码是未加密的,但SSH是加密的,OpenSSH加密所有通信(包括密码),有效消除了窃 ...

  5. python_MySQL

    原文章连接:http://www.runoob.com/python/python-mysql.html 配置数据库 conn = mysql.connector.connect(user='root ...

  6. Eclipse 在启动发生错误异常:An internal error occurred during: "Initializing Java Tooling". java.lang.NullPointerException的解决办法

    异常现象: 打开Eclipse,出现 An internal error occurred during: "Initializing Java Tooling". java.la ...

  7. sed command

    https://blog.csdn.net/solaraceboy/article/details/79272344

  8. https://scrapingclub.com/exercise/detail_sign/

    def parse(self, response): # pattern1 = re.compile('token=(.*?);') # token = pattern1.findall(respon ...

  9. 20190402Linux进阶命令week1.2

    Linux常用命令详解(week1_day1_2) aliasunaliasunamesuhostnamehistorywhichwcwwhowhoamipingkillseqdudffreedate ...

  10. dotnet core命令

    dotnet run -----运行程序 dotnet publish -r centos-x64  -----发布程序 mkdri 文件名--->cd 文件名--->dotnet new ...