当前位置:首页 > 日记 > 正文

嵌入式iframe子页和网页JS之间通信的方法

嵌入式iframe子页和网页JS之间通信的方法
本文介绍了嵌入式iframe子页面的父页面和JS之间的通信方式。分享给你供你参考。具体分析如下:

的页面和基于iframe的src属性域的iframe框架网页之间的通信手段是相同的链接或跨域通信链路,有明显的不同,同一个域的数据交换和DOM交换元素变得简单多了,和跨域需要一些聪明的方法来实现通信。

1。Pater和同一个域中的子页面之间的对应关系

父页面parent.html:

复制代码代码如下所示:
函数表示(){

警报(父目录>我在父目录下);

}

callchild()函数

{

/ /文档。帧{ }。window.say(myFrame); / /只适用于IE浏览器

MyFrame.window.say();

MyFrame.window.document.getElementById(按钮)。值=我改变了;

}

将child.html:

复制代码代码如下所示:
函数表示()

{

警报();

}

功能callparent(){

Parent.say();

parent.window.document.getelementsbyname(myFrame){ 0 }。风格。高度=100px ;

}


方法调用

调用子页面的方法,如上面的例子所示,可以这样做:FrameName.window.childMethod();(这种方式是与各种浏览器兼容)

对于孩子的页面调用父页面的方法:parent.window.parentmethod();

DOM元素的访问

根据framename.window获得的子窗口对象,然后访问DOM元素和DOM元素访问同一页面之间没有区别,可以复制代码代码如下:(文件。getElementById({ }),document.getelementsbyname指标)如:复制代码如下:parent.window.document.getelementsbyname(myFrame. ){ 0 };

MyFrame.window.document.getElementById(按钮)可以在所有的窗口略。

注意事项

确保操作iframe加载完成后,如果iframe尚未加载,它会调用方法或变量里面,会有一个错误。有两种方法来判断是否iframe加载。

1。使用iframe的onload事件;

2。使用文档。发生=完整的判断

二、跨域父子页通信方法

如果iframe链接外部网页,因为安全机制不能用同一个域名通信。

父页传递子页的数据。

诀窍是使用位置哈希,通过它传输数据的通信,我们只需要在一个#数据串父页面设置iframe(你要传输的数据),并以某种方式在这里得到即时可以在子页面的数据,事实上常用的方式是:

1。在子页面,通过setInterval方法设置定时器,听location.href变化获取数据信息

2。然后,子页面上可以根据数据信息。

子页面将数据传递给父页面。

诀窍是使用代理iframe C,它是嵌入到子页面,和父页面必须保持相同的域,通过它我们可以充分利用的原则可以遍历数据页上面的第一个通信方式传递给iframec,接下来的问题是如何将数据传递到iframec首页,因为iframec和主页是同一个域,所以他们之间传递的数据变得简单多了,沟通的问题属于同一个域名,如前面所讨论的,在这里你可以使用window.top属性(通常也可以使用窗口。母。母),它返回一个引用顶层窗口对象包括在浏览器,所以我们可以直接与父页面的方法。

希望本文能对大家的javascript程序设计有所帮助。

相关文章

用PHP绘制矩形的一种方法

用PHP绘制矩形的一种方法

方法,绘制,矩形,电脑软件,PHP,本文介绍了用PHP绘制矩形的方法,供大家参考,具体的实现方法如下: 复制代码代码如下: 1,创建画布 $我=新建一个真彩色图像(300200); / /创建彩色图像,默认的背景是黑色的,返回的图像标识符。还有一个功能,画面欣赏,这是…

什么是利用底层功能优于getJSON

什么是利用底层功能优于getJSON

底层,功能,电脑软件,getJSON,复制代码代码如下所示: $ ajax({ 键入:获取 网址:desturl, 成功:函数(数据){ 如果(数据={) Linfo。innerHTML =数据; } Loadimg。风格。显示为无; / / addtablelistener(document.getelementbyid(TBColor ),0,0); }, 错误:函数(){ 警…

PS柯达皮肤隔离霜

PS柯达皮肤隔离霜

柯达,电脑软件,PS,本教程介绍了一个朋友PS柯达皮肤过滤器为皮肤黑MM美白保湿的方法和步骤。教程很简单。最后的画面也很简单。建议像你这样的朋友一起学习这个教程。希望你能喜欢。 本教程是介绍PS柯达皮肤过滤法为皮肤黑MM增白肌肤补水的…

jQuery版本使Ajax不执行成功回调函

jQuery版本使Ajax不执行成功回调函

回调函数,不执行,版本,电脑软件,jQuery,对于使用Ajax请求数据不是第一次(总是觉得它是一样的事情),是昨天的问题吗需要使用Ajax进行项目数据的请求,那么整洁和快速复制的Ajax代码在后台数据处理前的项目完成后,测试(可以在想休息),谁知道胜利归来,没…

PS图象处理软件合成制作薰衣草花海

PS图象处理软件合成制作薰衣草花海

花海,图象,处理软件,海报,情绪,在海报设计之前,最好与顾客沟通,了解产品和品牌的内涵,然后搜集一些材料,根据这些想法找出设计灵感和初步构思,搜集素材,以 在海报设计之前,最好与顾客沟通,了解产品和品牌的内涵,然后搜集一些材料,根据这些想法找出设…

ps酷战游戏场景画家(介绍两种方法)

ps酷战游戏场景画家(介绍两种方法)

方法,两种,画家,场景,游戏,本教程是介绍朋友使用PS鼠标绘制的超酷游戏打斗场景,本文主要介绍两种渲染技术,很好,难度不大,新手可以过来学习制作和思考的方法,建议大家一起分享,一起学习。 本教程是介绍如何使用ps的画家朋友酷战打斗场景,非常实用…

PHP设计模式单一实例的实例分析

PHP设计模式单一实例的实例分析

实例分析,设计模式,实例,电脑软件,PHP,本文介绍了PHP设计模式的一个示例,供您参考,具体分析如下: Singleton模式(工作模式): 总之,一个对象(在学习设计模式之前,需要更清楚地意识到面向对象的想法)负责特定的任务; 单类: 1,构造函数需要标记为私有(访…

烟花爆竹没有实现企业标识凸显效果

烟花爆竹没有实现企业标识凸显效果

企业,标识,烟花爆竹,效果,电脑软件,当你做一个网站的时候,你经常需要处理客户的企业身份。如果你的网站需要被识别和背景色,客户提供的反白处理,客户只提供一个白色JPG图片文件怎么做呢本文和大家分享烟花企业LOGO抠图反白效果的方法,希望对大…

烟花MX产生了惊人的字体燃烧效果。

烟花MX产生了惊人的字体燃烧效果。

字体,烟花,产生了,惊人,效果,本教程是介绍朋友制作漂亮的字体烧效果,通过使用烟花MX教程的方法出来的字体效果真的很不错,推荐给喜欢的朋友,可以跟着教程一起学习。 本教程是介绍利用MX MX做朋友的漂亮字体燃烧效果,真的效果制作教程很不错,推荐…

用Javascript定义类的方法

用Javascript定义类的方法

方法,定义类,电脑软件,Javascript,用js定义类有很多种方法: 1。工厂模式 复制代码代码如下所示: 函数汽车(){ 无功控=新的对象; ocar.color =蓝色; ocar.doors = 4; ocar.showcolor =函数(){ document.write(这个颜色) }; 返回控; } VaR CAR…

一些用在Word2003Word2003教程写报

一些用在Word2003Word2003教程写报

教程,报告,用在,简介,技术,信息时代注重效率。如果我们要不断提高工作效率,我们必须熟练掌握的技能,除了掌握Word2003的正确使用,让你的一些我们利用Word2003写报告的技术分享。 1。隐藏文本 文本的背景色,方法是隐藏的,最入门的方法,当然,这也是…

word2010中设置封面的两种方法

word2010中设置封面的两种方法

方法,设置,封面,两种,电脑软件,  Word2010如何制作封面使你的文档变得独特呢?那么下面就由小编给大家分享下word2010中设置封面的技巧,希望能帮助到您。word2010中设置封面方法一1编辑好word文档。word2010中设置封面的方法图1  2单击&l…