一、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. selenium通过WebDriverWait实现ajax测试,实现等页面元素加载完成

    WebDriverWait(driver, 10)10秒内每隔500毫秒扫描1次页面变化,当出现指定的元素后结束. http://fox1984.iteye.com/blog/1225265new W ...

  2. Orchard Compact v1.7.2

    1. 仅包留了Core中的Settings和Shapes, 及Modules, Themes和jQuery模块. 2. 添加了对Oracle的支持. 下载地址: 二进制: Orchard.Compac ...

  3. WPF快速入门系列(6)——WPF资源和样式

    一.引言 WPF资源系统可以用来保存一些公有对象和样式,从而实现重用这些对象和样式的作用.而WPF样式是重用元素的格式的重要手段,可以理解样式就如CSS一样,尽管我们可以在每个控件中定义格式,但是如果 ...

  4. Mac OS X上用CoreCLR运行一个真正的.NET控制台程序

    这个真正的控制台程序来自corefxlab,名叫CoreClrHelloWorld,是一个跨平台的.NET控制台演示程序,可以显示微软.Linux.苹果的logo. CoreClrHelloWorld ...

  5. [C#] Timer + Graphics To Get Simple Animation (简单的源码例子,适合初学者)

    >_<" 这是一个非常简单的利用C#的窗口工程创立的程序,用来做一个简单的动画,涉及Timer和Graphics,适合初学者,高手略过~

  6. [matlab] 矩阵操作

    >_<:矩阵构造 1.简单矩阵构造 最简单的方法是采用矩阵构造符“[]”.构造1´n矩阵(行向量)时,可以将各元素依次放入矩阵构造符[]内,并且以空格或者逗号分隔:构造m´n矩阵时,每行如 ...

  7. jdbc实现简单的增删改查

    先是Book类. 略 然后一个主页,写一个表单,提交Book的信息到AddBook. 略 AddBook.jsp连接jdbc,并向Book表插入. <%@ page language=" ...

  8. MySql的基本操作以及以后开发经常使用的常用指令

    第一章:数据类型和操作数据表MySQL语句的规范(1):关键字与函数名称全部大写(2):数据库名称,表名称,字段名称全部小写(3):SQL语句必须以分号结尾 1:命令行模式启动mysql服务net s ...

  9. Leetcode 235 Lowest Common Ancestor of a Binary Search Tree 二叉树

    给定一个二叉搜索树的两个节点,找出他们的最近公共祖先,如, _______6______ / \ ___2__ ___8__ / \ / \ 0 4 7 9 / \ 3 5 2和8的最近公共祖先是6, ...

  10. javaweb回顾第四篇Servlet异常处理

    前言:很多网站为了给用户很好的用户体验性,都会提供比较友好的异常界面,现在我们在来回顾一下Servlet中如何进行异常处理的. 1:声明式异常处理 什么是声明式:就是在web.xml中声明对各种异常的 ...