一、iframe里面的页面调用父窗口,左右窗口js函数的方法

iframe里面的页面调用父窗口,左右窗口js函数的方法
实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法。
比如有A窗口,A内有个IFRAME B,B里面的装载的是C页面,这时C要直接调用A里面的一个自定义函数AFUN();
那么只要在C页面中写如下JS函数就可以了:
window.parent.AFUN();
如果AFUN()有参数也可以直接传递合适的参数进去。
例如:
修改父窗口控件属性
window.parent.document.getElementById('frmright').src=window.parent.document.getElementById('frmrightsrc').value;
调用父窗口函数
window.parent.POPUP('bigFram');

父窗口调用iframe子窗口方法
<iframe name="myFrame" src="child.html"></iframe>
myFrame.window.functionName();
iframe子窗口调用父窗口方法
parent.functionName();

////////////////////////////////////
用js互相调用iframe页面内的js函数
一个html页面,分成左右两块,左边为导航栏,右边为需要显示的内容,代码如下:
左栏的代码为:
<IFRAME frameBorder=0 id=frmTitleLeft name=framLeft src="left.html" style="HEIGHT: 100%; width:180px;">
连接到left.html
比如右栏中有一个函数right(),我要在左栏的链接中调用right()函数,该如何实现呢
1,首先leftframe是内嵌在容器页index.html中的,因此需要先返回到index这一级别,并取得rightframe对象
    var frames=window.parent.window.document.getElementById("frameid");
2,要能执行其页面中的函数,必须要获得window对象,这里有一个重要的对象contentWindow,获得这个对象,即可执行其中的函数了,如
    frames.contentWindow.right();
以上代码兼容IE6,Firefox3,chrome2.0,均成功通过测试,IE7没试过,不过应该没问题。
3.例如:
window.parent.document.getElementById('leftFrame').contentWindow.JSMenu('MenuUl'+Sid);
window.parent.frames["leftFrame"].JSMenu('MenuUl'+Sid);

二、javascript--iframe的JS方法,用法!contentWindow 、parent、top、onload

一、在使用iframe的页面,要操作这个iframe里面的DOM元素可以用:

contentWindow、contentDocument(测试的时候chrom浏览器,要在服务器环境下)

1.先获取iframe里面的window对象,再通过这个对象,获取到里面的DOM元素

例子:

var ifr = document.getElementById("iframe");

ifr.contentWindow.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

ifr.contentWindow 这里,返回的是iframe的window对象,所以后面可以接着调用document方法,再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。

二、在iframe本页面,要操作这个iframe的父页面的DOM元素(即嵌套这个iframe的页面)可以用:

window.parent、window.top(这里的TOP是获取的顶层,即有多层嵌套iframe的时候使用)

var ifr = document.getElementByTagName("iframe");

ifr.parent.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

三、onload事件

非IE下用法

ifr.onload = function(){
//SOMETHING
}

IE下,需要绑定

ifr.attachEvent("onload",function(){

//something

})

三、Js中的window.parent ,window.top,window.self详解

在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。

window : 代表当前窗体
self : 也代表当前窗体

window.self

功能:是对当前窗口自身的引用。它和window属性是等价的。

语法:window.self

注:window、self、window.self是等价的。

window.top

功能:返回顶层窗口,即浏览器窗口。

语法:window.top

注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。

window.parent

功能:返回父窗口。

语法:window.parent

注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。

在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。

判断当前窗口是否在一个框架中:

<script type="text/javascript">
var b = window.top!=window.self;
document.write( "当前窗口是否在一个框架中:"+b );
</script>

你应当将框架视为窗口中的不同区域,框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个的框架也可以分成其它多个框架,即所谓的嵌套框架。

javascript 的一些理解和随笔的更多相关文章

  1. javascript单例模式的理解

    javascript单例模式的理解 阅读目录 理解单例模式 使用代理实现单例模式 理解惰性单例 编写通用的惰性单例 单例模式使用场景 回到顶部 理解单例模式 单例模式的含义是: 保证一个类只有一个实例 ...

  2. JavaScript面向对象的理解

    JavaScript面向对象的理解  笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() ...

  3. javascript javascript面向对象的理解及简单的示例

    javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...

  4. javaScript深入浅出之理解闭包

    javaScript深入浅出之理解闭包 引言 闭包是个老生长谈的话题了,对于闭包网上也有很多不同的看法 <你不知道的javaScript>对于闭包是这么定义的:函数创建和函数执行不在同一个 ...

  5. JavaScript:彻底理解同步、异步和事件循环(Event Loop) (转)

    原文出处:https://segmentfault.com/a/1190000004322358 一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS ...

  6. 通过JavaScript原型链理解基于原型的编程

    零.此文动机 用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...

  7. 细心看完这篇文章,刷新对Javascript Prototype的理解

    var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } 分析上面这段代码,看看有没有问题 ...

  8. 【JavaScript】深入理解JavaScript之强大的原型和原型链

    由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...

  9. 对javascript this的理解

    对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下 首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的 ...

随机推荐

  1. CPU相关知识---物理CPU数、物理核数、逻辑核数、逻辑CPU数 ?

    一.物理CPU数.物理核数.逻辑核数.逻辑CPU数 相互关系??? 物理CPU数 ---> 每个物理CPU对应物理核数 ---> (每个物理核数对应逻辑核数)物理CPU对应逻辑核数 --- ...

  2. 让ASP.NET Web API支持text/plain内容协商

    ASP.NET Web API的内容协商(Content Negotiation)机制的理想情况是这样的:客户端在请求头的Accept字段中指定什么样的MIME类型,Web API服务端就返回对应的M ...

  3. C语言 线性表 顺序表结构 实现

    一个能够自动扩容的顺序表 ArrList (GCC编译). #include <stdio.h> #include <stdlib.h> #include <string ...

  4. [Hyper-V]给Hyper-V创建两块网卡备用

    描述 给Hyper-V创建两块网卡备用 步骤: 1 打开Hyper-V,在右侧Action栏,单击Virtual Switch Manager… 2 依次选择New Virtual network s ...

  5. 初学者利用git 上传代码到Coding的简单操作步骤

    1.首先登陆coding网站注册账号https://coding.net/ (注册完后需登陆邮箱激活邮件) 2.登陆刚注册的coding账号 ,添加项目 添加项目—〉输入项目名称—〉输入对项目的简单描 ...

  6. 2.利用NABCD模型进行竞争性需求分析

    1) N (Need 需求) 在宿舍里,舍友下载了一个比较好玩的游戏,一块好看的电影或者共享一个大体积的文件,而你又不想去重新下载,于是乎:‘’哎,win8怎么共享?‘’,‘’我的网上邻居怎么看不到你 ...

  7. Xperf Basics: Recording a Trace (the easy way)(转)

      http://randomascii.wordpress.com/2013/04/20/xperf-basics-recording-a-trace-the-easy-way/   Some ti ...

  8. 【shell脚本】显示文件的偶数或奇数行

    # Dispaly the odd line. awk 'NR%2==1' file

  9. Nginx学习笔记(八) Nginx进程启动分析

    Nginx进程启动分析 worker子进程的执行循环的函数是ngx_worker_process_cycle (src/os/unix/ngx_process_cycle.c). 其中,捕获事件.分发 ...

  10. 无线客户端框架设计(5):调用MobileAPI的设计(iOS篇)

    这一节讲如何发起网络请求. iOS用于调用MobileAPI的第三方组件很多,我们这里采用的是以下组件: 1)ASIHTTPRequest,用于请求MobileAPI:http://allseeing ...