`

iframe框架用JavaScript子页面控制父页面

阅读更多
<iframe marginwidth="0" framespacing="0" marginheight="0" frameborder="0"
name="uploadframe" id="uploadframe" src="c.html" scrolling="no" width="100" height="100" ></iframe>
如想在c.html 中写一些代码去改变parent.html 中的一些内容,以下代码可作为参考:

1、parent.window.frames 可返回parent.html 中所有的iframe;返回结果应该是一个数组,用parent.window.frames[iframeId]可得到iframeId;

2、用parent.document.getElementById('xxxx')可得到父里的xxxx,并改变相应的值,例如:parent.document.getElementById('xxxx').className = 'test';

3、如果我想在父中再创建一个元素,直接用parent.appendChild(yyyy)在firefox中是可以的,但在IE(最起码IE6)是不行的; 所以,要把创建这个动作放在父中来完成,在子中调用;

例如:父中的代码为:


function addIframe(vNum){
var iframe = document.createElement("iframe");
iframe.setAttribute("marginwidth", "0");
iframe.setAttribute("framespacing", "0");
iframe.setAttribute("marginheight", "0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("name", vNum);
iframe.setAttribute("id", vNum);
iframe.setAttribute("src", "http://www.zishu.cn");
iframe.setAttribute("scrolling", "no");
iframe.setAttribute("width", "100");
iframe.setAttribute("height", "100");
document.getElementsByTagName('body')[0].appendChild(iframe);
return;
}
子中可以这样调用:


<script>
parent.addIframe('xxxx');
</script>
这样就能完整创建一个元素了;

4、同理,如果我想在子中把iframe给隐藏,本来想直接用parent.document.getElementById('uploadframe').style.display = 'none';来弄,但无论是在IE还是FIREFOX中,都是行不通的;只能用上边的方法把动作放在父中。




分享到:
评论

相关推荐

    demo_DEMO_子页面刷新父页面iframe_

    标题“demo_DEMO_子页面刷新父页面iframe_”暗示我们关注的焦点是关于如何在子页面中触发父页面的刷新操作,特别是在一个IFrame上下文中。下面将详细探讨这个主题。 首先,我们需要了解IFrame(内联框架)的基本...

    在iframe中调用js父页面和子页面方法

    总结,`iframe`中的JavaScript交互涉及到页面间的通信,无论是父页面调用子页面还是子页面调用父页面,都需要理解`window`对象、同源策略以及跨域通信机制。正确使用这些技术,可以在多页面应用中实现更复杂的功能...

    在iframe框架中打开页面的方法

    使用iframe框架可以在不离开当前页面的情况下打开新的页面,这对于需要在同一页面内操作多个内容块的场景非常有用。 在iframe框架中打开页面,通常涉及到HTML和JavaScript技术。这里涉及到的知识点主要包括: 1. ...

    JAVASCRIPT让IFRAME框架的高度自适应

    为了解决这个问题,我们可以使用JavaScript来让IFRAME框架的高度自适应页面内嵌不同的网页内容。 在这篇文章中,我们将介绍使用JavaScript来让IFRAME框架的高度自适应的方法。首先,我们需要定义一个函数来获取当前...

    子页面访问父页面 和 跨iframe访问

    总结来说,“子页面访问父页面”和“跨iframe访问”是Web开发中的关键技能,它们允许在不同层次或域的页面间进行数据传递和控制交互。理解和掌握这些技术对于构建动态、交互性强的网页至关重要。通过阅读提供的博客...

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

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

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

    如果要在 iframe 子页面中取父页面中的标签中的值,可以使用 `window.parent.document.getElementById("test").value`,或者使用 jQuery 方法: ``` $(window.parent.document).contents().find("test").val(); ``` ...

    iframe父页面与子页面互相调用

    ### Iframe父页面与子页面互相调用 在Web开发中,经常需要用到iframe来嵌套显示其他页面。本文将通过一个具体的示例介绍如何实现iframe中的父页面与子页面之间的互相调用,以及子页面中再嵌套iframe时的相关操作。 ...

    jquery应用子页面在父页面打开

    在网页开发中,有时我们需要实现子页面在父页面中打开的功能,这在多窗口或框架结构的应用中尤其常见。jQuery库作为一个强大的JavaScript工具集,能够简化这种操作,使得无需依赖基础的jQuery类库就能实现这一功能。...

    子页面访问父页面和跨iframe访问(ie 和火狐)

    在网页开发中,有时我们需要在不同的页面或者框架之间进行交互,比如子页面操作父页面的数据,或者在一个iframe中访问另一个iframe中的内容。这种情况在实际应用中很常见,尤其是在构建复杂Web应用时。以下是对"子...

    iframe弹出框遮罩父类页面

    4. **事件处理**:确保在父页面中,如果有需要与子页面进行交互的事件,例如关闭弹出框,可以使用JavaScript的`parent`对象来访问父页面的元素或函数,从而实现通信。 5. **布局与样式**:对于`layout.html`,可能...

    ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容

    在***中实现点击左边页面链接时,右边iframe框架显示对应链接页面的内容,是一种常见的网页布局模式,经常被用于后台管理系统中。这种布局允许用户在一个窗口内操作导航,而在另一个子窗口内查看和处理内容,从而...

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

    在EasyUI中,我们可能会遇到需要在弹出窗口(子页面)与父页面之间进行数据传递或调用父页面方法的需求。下面将详细讲解这个过程。 首先,让我们理解标题中的“弹出window窗口传值”。在EasyUI中,创建一个弹出窗口...

    iframe自适应子页面内容高度

    2. JavaScript处理:通过`contentWindow`和`contentWindow.document`获取子页面高度,或使用`postMessage`和`message`事件进行跨域通信。 3. 动态调整:在父页面中监听事件,接收到高度信息后更新`iframe`的高度。 ...

    iframe框架使用(完美版)

    "iframe框架使用(完美版)"这一主题着重讲解了如何高效、灵活地运用iframe,并解决其中的一些常见问题,如自适应高度的设定以及通过JavaScript进行封装。 首先,我们要理解iframe的基本用法。`&lt;iframe&gt;`标签通常包含...

    Iframe 框架自适应被嵌入页面高度

    本文将深入探讨如何使用JavaScript来控制Iframe框架自适应被嵌入页面的高度。 首先,我们要理解为什么需要动态调整Iframe的高度。由于Iframe的内容可能来自于不同的来源,其内容长度是不确定的,因此在页面加载时...

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

    在`iframe`内的页面,我们可以使用`parent`对象来访问父页面的全局变量和函数。例如,如果在`iframe`内想要调用父页面的一个名为`parentFunction`的函数,可以这样写: ```javascript parent.parentFunction(); ```...

    iframe框架中实现打开多窗口方法

    总之,在iframe框架中实现多窗口打开是一项结合了HTML结构、属性应用和JavaScript动态控制的综合技能。掌握这一技术,不仅能够提升网站的交互性和功能性,还能进一步拓展开发者在前端领域的实践能力。

    js中子页面获取父页面ID

    在JavaScript中,经常会出现需要从子页面(通常是`iframe`中的页面)访问或操作父页面元素的情况。本文将详细介绍如何实现子页面调用父页面ID,并对其进行操作。 #### 理解基本概念 在讨论如何实现这一功能之前,...

    iframe父页面获取子页面参数的方法

    在Web开发中,有时我们需要在父页面中操作或者获取嵌入的`iframe`子页面中的数据,例如在一些复杂的交互式应用或者多层框架结构的网页中。标题和描述所提及的是一个具体示例,展示了如何从父页面获取`iframe`子页面...

Global site tag (gtag.js) - Google Analytics