JavaScript iframe数据共享接口实现方法

在iframe与父窗口或者与子窗口传递数据是一个麻烦的事情,如果我们能够写一个一劳永逸的接口那就再方便不过了,下面就来简答介绍一下如何实现此功能。原理就是将数据缓存早window.top这个窗口,这样无论子窗口父窗口的层次如何变化,数据总是存在不会变化的。

代码如下:

var share={
data:function(name,value){
var top=window.top,
cache=top['_CACHE']||{};
top['_CACHE']=cache;
return value?cache[name]=value:cache[name];
},
removeData:function(name){
var cache=window.top['_CACHE'];
if(cache&&cache[name])
{
delete cache[name];
}
}
};
share.data('mayi','http://www.jb51.net'); 

上面的代码实现了我们的要求,代码比较简单,大家可以自行分析一下,如有任何问题可以跟帖留言。

大家知道JS中Iframe之间是怎么传值的吗?下面给大家简单介绍下。

1.在iframe子页面中获取父页面的元素:

a>window.parent.document这个是获取父页面document中的对象;
b>如果要获取父页面js中的方法:window.parent.xxxx();xxxx()为方法;

2.在父页面中获取iframe子页面中的元素:
a>
var child = document.getElementByIdx_x("mainFrame").contentWindow;//mainFrame这个id是父页面iframe的id
child.document;//获取子页面中的document对象;

时间: 2016-01-03

面向对象的Javascript之二(接口实现介绍)

就足以说明接口在面向对象的领域中有多重要.但JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一组对象包含相似的的特性.所幸的是JS拥有强大的灵活性(我在上文已谈过),这使得模仿接口特性又变得非常简单.那么到底是接口呢? 接口,为一些具有相似行为的类之间(可能为同一种类型,也可能为不同类型)提供统一的方法定义,使这些类之间能够很好的实现通信. 那使用接口到底有哪些好处呢?简单地说,可提高系统相似模块的重用性,使得不同类的通信更加稳固.一旦实现接口,

JavaScript接口实现代码 (Interfaces In JavaScript)

在实际中,我们可以在注释中定义好接口,在实际的代码中予以实现 比如: 复制代码 代码如下: /* interface Composite { function add(child); function remove(child); function getChild(index); } interface FormItem { function save(); } */ var CompositeForm = function(id, method, action) { // implement

js获取新浪天气接口的实现代码

js获取新浪天气接口的实现代码 <!doctype html> <html class="no-js fixed-layout"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>天气</title> </

JavaScript接口的实现三种方式(推荐)

Javascript模仿接口可以有三种方式:1.注释法 2.检查属性法 3.鸭式辨形法 1.注释法:此方法属于程序文档范畴,对接口的继承实现完全依靠程序员自觉 /* interface People{ function createHead(); function createBody(); } */ var woman = function(name){ //implements People interface this.name = name; } woman.prototype.show

深入剖析构建JSON字符串的三种方式(推荐)

前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax 时,在后台将数据封装为 JSON 字符串更是常见.之前在做项目的时候用过几种方式在后端将数组或 List 集合转换为 JSON 字符串,现在回想起来竟然又有些遗忘.现在来一个汇总,把这几种构建 JSON 字符串的方式彻底回忆起来. 笔记中提供了大量的代码示例,需要说明的是,大部分代码示例都是本人所敲代码并进行测试,不足之处,请大家指正~ 一.alibaba 的 Fastjson 1.Fastjson 是一个以 Java 语言

mvc中form表单提交的三种方式(推荐)

第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit" value="搜索&

javascript函数命名的三种方式及区别介绍

javascript函数命名的三种方式及区别介绍 第一 复制代码 代码如下: function fn(val1,val2) { alert(val1+val2); } fn(1,2); 第二 复制代码 代码如下: var fn=function() { alert(val1+val2); } fn(1,2); 第三 复制代码 代码如下: var fn=new Function("alert(val1+val2)"); fn(1,2); 上面三种方式逻辑上是等价的,但是还是有点小区别:区

详述JavaScript实现继承的几种方式(推荐)

ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的. 原型链 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的指针.如果:我们让原型对象A等于另一个类型B的实例,那么原型对象A就会有一个指针指向B的原型对象,相应的B的原型对象中保存着指向其构造函数的指针.假如B的原型对象又是另一个类型的实例,那么上述的关系依旧成立,如此层层递进,就构成了实例与原型的

前端js文件合并的三种方式推荐

最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页面大文件,各自页面合并生成自己所需js的大文件. 3. 合并多个共用大文件,根据实践情况合并出多个共用js文件,每个页面引用多个共用大文件. 另外在我看来,合并有两个目的: 1. 为了减少请求数. 2. 代码安全考虑(文件分得越多,越容易被人看清). PS:注意我说的不是压缩混淆,只是合并 1. 一

scala中停止循环的三种方式(推荐)

Scala 循环 有的时候,我们可能需要多次执行同一块代码.一般情况下,语句是按顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推. 编程语言提供了更为复杂执行路径的多种控制结构. 循环语句允许我们多次执行一个语句或语句组,下面是大多数编程语言中循环语句的流程图: 开始正文介绍: 1:使用return关键字 object BreakLoop { //1.使用return关键字 def add():Unit= { for(i <- 1 to 10){ if(i==7){ //停止循环

Angularjs 自定义服务的三种方式(推荐)

AngularJS简介: AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). AngularJS 学习起来非常简单. angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$provide var starterApp = angular.module('

探讨JavaScript中声明全局变量三种方式的异同

变量及变量声明是一门语言最基本的概念,初学者都会很快掌握.JavaScript中声明变量也是如此,很简单var(关键字)+变量名(标识符). 方式1 var test;var test = 5;需注意的是该句不能包含在function内,否则是局部变量.这是第一种方式声明全局变量. 方式2 test = 5;没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test.即使该语句是在一个function内,当该function被执行后test变成了全局变量. 方式3 window

记录Android studio JNI开发的三种方式(推荐)

概述 在Andorid Studio不支持JNI开发之前大家一般都是使用Eclipse开发JNI,各种配置让人觉得很蛋疼.从Andorid Studio支持JNI开发后,让我们开发JNI变的如此简单. NDK 和 JNI介绍 JNI (Java Native Interface)是一套编程接口,用来实现Java代码和其他语言(c.C++或汇编)进行交互.这里需要注意的是JNI是JAVA语言自己的特性,也就是说JNI和Android没有关系.在Windows下面用JAVA做开发也经常会用到JNI,