`

iframe子页面与父页面元素的访问以及js变量的访问

    博客分类:
  • js
 
阅读更多
1、子页面访问父页面元素

parent.document.getElementById('id')和document相关的方法都可以这样用

2、父页面访问子页面元素

document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用document相关方法

3、子页面访问父页面js变量(注:父页面的js变量需为全局变量)

子页面var variable = parent.variableParent   (variableParent为父页面定义的变量)

4、父页面访问子页面js变量

这部分目前的解决方案是在父页面设置全局变量,在子页面进行修改后将子页面的变量赋值给父页面

(转载http://www.2cto.com/kf/201212/180051.html)
分享到:
评论

相关推荐

    Iframe获取父页面的变量和控件

    在网页开发中,有时我们需要在一个页面(子页面)中访问另一个页面(父页面)的数据或控制元素,这种情况下,`Iframe` 提供了一个解决方案。本文将深入探讨如何通过 `Iframe` 获取父页面的变量和控件。 首先,我们...

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

    利用这个对象,我们就可以访问到iframe页面中的全局变量和函数。 在使用jQuery进行操作时,需要注意的是jQuery本身并不提供跨iframe域的直接支持。因此,这里提到的方法和实例都基于同源策略,即父页面和iframe页面...

    iframe子页面与父页面在同域或不同域下的js通信

    在讨论iframe子页面与父页面间的JavaScript通信时,首先需要理解同域与跨域的概念。同域指的是两个页面的协议、域名和端口完全相同。跨域则是指页面的协议、域名或端口中的一个或多个不同。 在同域环境下,iframe与...

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

    总结来说,`iframe`与父页面间的通信主要依赖于JavaScript的DOM接口、`postMessage`/`message`事件以及URL参数和Web存储。在实际应用中,开发者应根据项目需求和安全性考虑选择合适的通信方式。了解这些方法,可以...

    利用JQuery操作iframe父页面、子页面的元素和方法汇总

    3. **JavaScript 在iframe子页面获取父页面元素**: ```javascript window.parent.document.getElementById('元素id') ``` 4. **JavaScript 在父页面获取iframe子页面元素**: ```javascript window.frames[...

    用js互相调用iframe页面内的js函数

    // 然后,可以调用iframe页面中的函数 frames.right(); ``` 这里的`window.parent.window`用于返回到包含`iframe`的上一级窗口,然后通过`getElementById`找到`iframe`元素,进一步获取它的`contentWindow`属性,这...

    iframe兄弟页面相互调用

    在多页面交互的场景下,`iframe`中的子页面与父页面以及与其他兄弟`iframe`之间的通信就显得尤为重要。本文将详细讲解如何实现`iframe`兄弟页面之间的相互调用。 首先,理解`iframe`的结构是关键。一个`iframe`元素...

    js实现ifram取父窗口URL地址的方法

    这一过程利用了JavaScript中的window.parent对象,它是iframe元素与父窗口之间的桥梁。 首先,理解window对象在JavaScript中的地位非常关键。window对象代表了浏览器中的一个窗口或一个标签页,它包含有关窗口的...

    iframe 子父界面 传值.zip

    总结,`iframe`子父界面传值是网页开发中的重要技术,通过JavaScript的`window.parent`、`postMessage`、`frames`对象,URL参数以及Web存储等方式,我们可以实现双向通信,提高用户体验和应用的交互性。在实际项目中...

    浅谈js中子页面父页面方法 变量相互调用

    如果子页面需要访问父页面中的DOM元素,可以使用window.parent.$("#id值")(如果是使用jQuery的情况下)或者window.parent.getElementById("id值")(原生JavaScript的方式)来获取父页面中的DOM元素。 另一方面,父...

    iframe父向子传值实例.rar

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

    JavaScript操作iframe父窗口和子窗口例子

    JavaScript操作iframe父窗口和子窗口是一种常见的Web开发技术,它涉及到网页交互和页面通信。在Web应用程序中,iframe(Inline Frame)常用于嵌入其他网页或者实现页面的局部刷新,而父窗口与子窗口之间的通信则能...

    JQueryiframe页面操作父页面中的元素与方法(实例讲解)

    1. **在`iframe`中查找父页面元素**: 要在`iframe`中找到并操作父页面的元素,我们可以使用`jQuery`的选择器,但需要指定正确的上下文。例如,要查找父页面ID为`default`的元素,可以使用以下代码: ```...

    JQuery操作iframe父页面与子页面的元素与方法(实例讲解)

    ### JQuery操作iframe父页面与子页面的元素与方法 #### 知识点一:JQuery在iframe中查找父页面元素的方法 - 在iframe中查找父页面元素时,可以使用以下代码:`$('#id', window.parent.document)`。这里的`$('#id')`...

    被打开页面操作父页面上的控件

    - 通过`window.opener`,子页面可以访问和修改父页面的全局变量、函数或DOM元素。例如,可以调用`window.opener.functionName()`来执行父页面定义的函数,或者修改`window.opener.document.getElementById('id')....

    页面间DOM相互访问

    首先,我们来看**iframe子页面与父页面之间的访问**: 1. **访问DOM**: - 父页面访问子页面的DOM,可以通过`contentDocument`属性获取iframe内的`document`对象。例如,在A.html中访问B.html的DOM,代码如下: `...

    iframe与主框架跨域相互访问

    它们可以共享JavaScript变量、通过DOM操作互相影响,以及使用`window.postMessage`进行通信。例如,主框架可以通过以下方式获取`iframe`中的DOM元素: ```javascript var iframeDoc = document.getElementById('...

    iframe应用

    ### iframe应用:父窗体与子窗体之间的相互操作 在网页开发中,`iframe`(Inline Frame)是一种常用的HTML元素,它允许在一个文档中嵌入另一个文档,从而实现页面内容的嵌套显示。通过使用`iframe`,开发者可以在一...

Global site tag (gtag.js) - Google Analytics