frameset,iframe框架之间如何互相调用变量、函数

以往一直在编写的都是前台的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之间的互相调用知识点就这些!

时间: 2024-10-10 00:29:04

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

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

var iframe = document.createElement("iframe"); iframe.src = "http://www.baidu.com/"; if (!/*@[email protected]*/0) { //if not IE iframe.onload = function(){ alert("框架加载完毕."); }; } else { iframe.onreadystatechange = function()

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

Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].hw_CallIn(callerid,sessionid); 说明: CallCenter_iframe为iframe的id hw_CallIn为iframe中页面中的方法名 callerid和sessionid为方法中的参数 例子如下:index.html <a href="#" o

html iframe 元素之间的调用

html iframe 元素之间的调用一.简介 一般需要引入一个独立页面的时候,我们会使用iframe.在业务需要的时候,我们需要在父页面与iframe页面之间进行交互.交互的时候,我们就需要使 用到js或jquery对父页面或子页面中的相关元素进操作.二.示例 1.页面结构如下: 父页面: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content

flex集成IFrame,IFrame集成UnityWebPlayer直接通讯调用解决方案

做Web开发通常是flex与JS交互,UnityWebPlayer与JS交互.它们之间相互调用比较常见. /** * Flex调用Javascript函数 * @params functionName:String Javascript函数名称 * @params ...params Javascript函数参数 * @return 返回Javascript函数的return内容 **/ ExternalInterface.call(functionName:String, ...params)

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

做Web开发一般是flex与JS交互,UnityWebPlayer与JS交互. 它们之间相互调用比較常见. /** * Flex调用Javascript函数 * @params functionName:String Javascript函数名称 * @params ...params Javascript函数參数 * @return 返回Javascript函数的return内容 **/ ExternalInterface.call(functionName:String, ...params

获取IE (控件)的所有链接(包括Frameset, iframe)

获取IE (控件)的所有链接(包括Frameset, iframe) IE 顶层 body 节点通过IHTMLElement->get_all 方法无法获取iframe 里面的节点列表 CComPtr<IHTMLElement> body; CComPtr<IDispatch> spDispCollection;body->get_all(&spDispCollection); 所以要获取iframe/frame(frameset) 里面的节点列表的话, 则需要

CodeIgniter框架——访问方式 URI 分配变量 数据库操作

1.访问方式: CodeIgniter 的访问URL使用的是pathinfo,入口文件/控制器/方法(/参数列表) eg:localhost/index.php/welcome/index/id 第一段表示调用控制器类. 第二段表示调用类中的函数或方法. 第三及更多的段表示的是传递给控制器的参数,如 ID 或其它各种变量. 2.URI参数获取: 控制器端代码 1 public function getUri($id,$name,$year) 2 { 3 echo "id--->"

session过期跳转到登陆页面并跳出iframe框架的两个方法

最近在做拦截器,判断用户登录后操作超时,失去权限然后要重新登录,但是用的iframe,返回的登陆页总是在框架中显示,我百度了下,总是只有其中一个方法,现在分享下两种解决方法,希望对你们有帮助: 方法一: 一般使用filter过滤用户是否登录,如果用户没有登陆则转向登陆页面,这时候可以使用response.sendRedirect().但当在页面上使用了iframe后,发现被重定向的只是父页面中的iframe区域,登陆页面内容显示在该区域中.说明在过滤器中发送重定向请求时,是在iframe页面发送

使用iframe框架的优缺点

虽然iframe框架已经完全被ajax替代了,但是仍然有必要知道它的一些弊病和优势,知道它为什么不再适合使用. 缺点: 1.iframe最大的缺点就是搜索引擎的爬虫程序无法爬取iframe页面的内容,导致其只看到框架看不到链 接,于是绕道而走你的网页在搜索引擎中就排不到靠前的次序. 2.会产生很多页面,不容易管理. 3.不容易打印(目前只能实现分框架页面的打印,不能实现对frameset的打印). 4.浏览器的后退按钮无效(只能针对实现当前光标所在页面的前进与后退,无法实现frameset整个页