javascript 的一些理解和随笔
一、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 的一些理解和随笔的更多相关文章
- javascript单例模式的理解
javascript单例模式的理解 阅读目录 理解单例模式 使用代理实现单例模式 理解惰性单例 编写通用的惰性单例 单例模式使用场景 回到顶部 理解单例模式 单例模式的含义是: 保证一个类只有一个实例 ...
- JavaScript面向对象的理解
JavaScript面向对象的理解 笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() ...
- javascript javascript面向对象的理解及简单的示例
javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...
- javaScript深入浅出之理解闭包
javaScript深入浅出之理解闭包 引言 闭包是个老生长谈的话题了,对于闭包网上也有很多不同的看法 <你不知道的javaScript>对于闭包是这么定义的:函数创建和函数执行不在同一个 ...
- JavaScript:彻底理解同步、异步和事件循环(Event Loop) (转)
原文出处:https://segmentfault.com/a/1190000004322358 一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS ...
- 通过JavaScript原型链理解基于原型的编程
零.此文动机 用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...
- 细心看完这篇文章,刷新对Javascript Prototype的理解
var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } 分析上面这段代码,看看有没有问题 ...
- 【JavaScript】深入理解JavaScript之强大的原型和原型链
由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...
- 对javascript this的理解
对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下 首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的 ...
随机推荐
- SQL Develop SSH远程连接
目前碰到了本机无法直接连接数据库服务器,然后mac上可以选择的oracle客户端又很少,直到知道了可以ssh远程到跳板机上,然后进行连接. 在跳板机上输入命令如下: ssh -L 0.0.0.0:65 ...
- PhoneJS - HTML5 JavaScript 移动开发框架
大伙儿都知道有很多基于HTML5的移动应用框架.下一代开发工具将帮助开发者远离那些难学和让人费劲的原生SDK语言,如Objective-C,Java等.大家都知道,HTML5代表着交叉平台如移动应用程 ...
- HttpLib - 一个对 Http 协议进行封装的库
今日,在 Codeplex 上看到一个开源项目,对 Http 协议进行了封装,这下可以方便这些在 .NET 平台下访问 Web 服务器的同学们了,比如,从 Web 服务器抓取一个页面,使用 .NET ...
- 【Leetcode】【Medium】word search
Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...
- 深入浅出OOP(五): C#访问修饰符(Public/Private/Protected/Internal/Sealed/Constants)
访问修饰符(或者叫访问控制符)是面向对象语言的特性之一,用于对类.类成员函数.类成员变量进行访问控制.同时,访问控制符也是语法保留关键字,用于封装组件. Public, Private, Protec ...
- C++ 重载操作符与转换
<C++ Primer 4th>读书笔记 重载操作符是具有特殊名称的函数:保留字 operator 后接需定义的操作符号. Sales_item operator+(const Sales ...
- 负margin在布局中的运用(*****************************************************************)
一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- javaweb学习总结(二十四)——jsp传统标签开发
一.标签技术的API 1.1.标签技术的API类继承关系 二.标签API简单介绍 2.1.JspTag接口 JspTag接口是所有自定义标签的父接口,它是JSP2.0中新定义的一个标记接口,没有任何属 ...
- javaweb学习总结(二十二)——基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
- Leetcode 257 Binary Tree Paths 二叉树 DFS
找到所有根到叶子的路径 深度优先搜索(DFS), 即二叉树的先序遍历. /** * Definition for a binary tree node. * struct TreeNode { * i ...