`

iframe与父页面传值

阅读更多
最近做的项目中用到了不少iframe,而且需要实现:
从父页面获取iframe中某个元素的值或则从iframe页面获取其父页面上某个元素的值。
在网上查询了相关东西,后总结如下:
(1)父页面获取iframe中的元素值:
//根据iframe的id获取对象
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//获取iframe中的元素值
var val=i1.document.getElementById("t1").value

(2)在iframe中获取父页面中的元素值:
var val = parent.document.getElementById("txt1"); 

(3)a包含2个iframe分别为b,c,现在从b中获取c中的元素的值:
var i1 = parent.window.frames['iframeId'];
var val = i1.document.getElementById("text1").value;

注意下:上边的代码适用于ie。我在ie8下测试通过,Firefox3下运行不了(由于项目仅要求IE,不要求Firefox )。下边两句话引用网上其他朋友写的:
window.opener引用的是window.open打开的页面的父页面。  
window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面。
我上传了测试页面,方便大家参考。本人技术有限,有写的不对的地方,希望朋友们指正!^_^
分享到:
评论
4 楼 ron.luo 2013-06-06  
哈哈,不错,正需要呢...
3 楼 kelongsoft 2010-08-06  
      还是这么的精辟,                 永
              远           不                  知
              疲     倦    地        学习中,我对你的崇拜有
              如     涛    涛                  江 
              水     ,    连        绵不绝。文章真是写的太
              好    了,   好                  我
              我    都不   知        写些啥来评价你的文章了
              ,   所  以  在                  此
              给   于  积  积                   的     万
              评  价     ,希                    望   事 
              在 以      后的                     工如
                作        中                     意积
               累           更                  啊  多
              的             经                      验      
2 楼 fhq563 2010-07-08  

            还是这么的精辟,                 永
             远                不                  知
             疲     倦         地            学习中,我对你的崇拜有
             如     涛        涛                  江 
             水     ,        连            绵不绝。文章真是写的太
             好    了,       好                      我
             我    都不       知            写些啥来评价你的文章了
             ,   所  以      在                      此
             给   于  积      积                       的     万
             评  价     ,    希                        望   事 
             在 以      后    的                         工如
                作        中                         意积
               累              更                       啊  多
              的                经                         验      


   
1 楼 fhq563 2010-07-08  
parent
            还是这么的精辟,                 永
              远           不                  知
              疲     倦    地        学习中,我对你的崇拜有
              如     涛    涛                  江 
              水     ,    连        绵不绝。文章真是写的太
              好    了,   好                  我
              我    都不   知        写些啥来评价你的文章了
              ,   所  以  在                  此
              给   于  积  积                   的     万
              评  价     ,希                    望   事 
              在 以      后的                     工如
                作        中                     意积
               累           更                  啊  多
              的             经                      验      


   

相关推荐

    iframe与父页面传值(方法互调)

    然而,当涉及到`iframe`与父页面之间的通信时,就需要用到一些特殊的方法来实现数据的传递和函数调用。本篇文章将深入探讨如何在`iframe`与父页面之间进行值的传递以及方法的互相调用。 首先,我们可以通过...

    layer弹出子iframe层父子页面传值的实现方法

    本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下: 父页面获取子页面元素 格式: $("#iframeID").contents().find("#eleID") 示例代码: father.html <!DOCTYPE html> <...

    iframe子向父传值实例.rar

    总的来说,`iframe`子向父页面传值是一个常见的需求,尤其是在处理跨域问题时。通过学习和实践这个实例,开发者不仅可以掌握一种实用的技术,还能加深对Web安全和浏览器限制的理解,提升自己的开发技能。

    iframe父向子传值实例.rar

    然而,由于浏览器的同源策略限制,`iframe`内的页面与包含它的父页面在不同源时,不能直接访问彼此的DOM或JavaScript变量,这就引出了"iframe父向子传值"的问题。 在标题"iframe父向值实例.rar"和描述中提到的解决...

    iframe 子父界面 传值.zip

    `postMessage` API 是现代浏览器支持的一种安全的跨域通信方式,`iframe`与父页面之间可以通过这个API传递消息。发送方使用`postMessage`方法发送消息,接收方监听`message`事件接收消息。 **子页面发送消息:** `...

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    综上所述,EasyUI弹出窗口的传值与调用父页面方法涉及到前端页面交互的基本技术,理解并熟练掌握这些技巧对于前端开发者来说至关重要。通过正确使用这些方法,可以有效地实现页面间的数据流动和功能协同,提升用户...

    子父窗口传值

    在这个场景中,"子父窗口传值"指的是在同一个Web应用中,子页面(通常是弹出窗口或iframe)向父页面传递数据,或者父页面向子页面传递数据,以实现特定的功能交互,而这种交互通常是为了避免不必要的后台通信,提高...

    iframe子父页面调用js函数示例.docx

    "iframe子父页面调用js函数示例...4. JS 中 iframe 之间传值及子页面与父页面应用 5. javascript 猎取 iframe 里页面中元素值的方法 6. JS 实现 iframe 跨页面调用函数的方法 7. JS 如何对 Iframe 内外页面进行操作总结

    JS父页面与子页面相互传值方法

    在多页面应用或者嵌入式框架(如iframe)中,经常需要进行父页面与子页面之间的数据交换。下面将详细介绍如何在不同场景下使用JS实现这种传值。 一、子页面是父页面通过`window.open`弹出的情况 当子页面是通过`...

    Jquery调用iframe父页面中的元素及方法

    本文将详细介绍如何使用jQuery来查找和操作iframe父页面中的元素和方法。 首先,需要明确iframe元素可以被视为一个小型的浏览器窗口,它有自己的文档对象模型(DOM)。要与iframe中的DOM交互,需要通过iframe的...

    子窗口传值到父窗口.rar

    在Web开发中,有时我们需要在子窗口与父窗口之间传递数据。这通常发生在弹出窗口或者框架集等场景中,用户在子窗口进行操作后,需要将结果反馈给父窗口,以便更新父窗口的状态或展示相关信息。这个过程就称为“子...

    JS中Iframe之间传值及子页面与父页面应用

    本文将深入探讨如何在JS中进行`<iframe>`间的值传递以及子页面与父页面的交互。 首先,让我们理解如何在子页面中获取父页面的元素或方法: 1. 获取父页面的元素: - 使用 `window.parent.document` 可以访问父...

    页面中iframe相互传值传参

    但同时,它也引入了父页面与iframe之间进行数据交换的需求,也就是所谓的“传值传参”。随着浏览器技术的发展,不同浏览器间的兼容性问题成为开发者需要考虑的重要方面。特别是早期的浏览器,如Internet Explorer和...

    iframe父子传值

    与父向子传值类似,子`iframe`也可以通过`postMessage`向父页面发送数据: ```javascript // 子页面 window.parent.postMessage('我是来自子页面的数据', '父页面的源URL'); // 父页面 window.addEventListener('...

    MVC实现iframe弹窗传值

    在Web开发中,MVC(Model-...综上所述,实现MVC中的iframe弹窗传值涉及前端JavaScript交互、URL参数传递以及后端MVC的控制器和视图的配合。通过合理的代码组织和利用现有的库,可以创建出高效且易于维护的弹窗系统。

    frameSet应用 子父窗口传值

    `frameSet`的应用通常与 frameset 结构配合使用,使得网页设计更加灵活,能够实现不同页面间的互动。本篇文章将详细讲解如何在`frameSet`环境下进行子父窗口间的通信以及如何通过点击左边的导航栏来更新右边的内容。...

    window.open父子窗口传值问题

    5. **使用IFrame**:如果子窗口可以嵌入到父窗口中,可以通过IFrame与父窗口通信,利用`contentWindow`属性。 6. **服务器作为中介**:如果跨域,可以通过共同的服务器作为中间人,将数据通过服务器转发给另一方。 ...

    jQuery Layer弹出层传值到父页面的实现代码

    - 如何利用JavaScript中的parent关键字跨iframe向父页面传值。 - 如何在父页面中接收来自子弹出层的数据,并将其加入到页面中(例如添加到一个树状列表)。 - 如何在数据传递完成之后关闭Layer弹出层。 在实现跨...

Global site tag (gtag.js) - Google Analytics