`
A牛哥哥
  • 浏览: 150289 次
社区版块
存档分类
最新评论
阅读更多
页面上多个frame 嵌套, 怎样取各frame中的值呢?


假设A页面中引入了B, C两个页面, A页面如下:
<frameset rows=”20,*”>
	<frame src=”B.html” name=”b” id=”b”>
	<frame src=”C.html” name=”c” id=”c”>
</frameset>



1, 要在C.html中用js代码获取B.html的<input type=”text” id=”xx”/>的值怎么做?
首先要明白, 此时浏览器展现给我们的页面是3个页面组成的, 这其中就有3个window对象和3个document对象, 现在要获取B页面中的东西, 就要先得到B的window, 再得到B的document对象, 这样就可以操作B页面中的元素了,问题变成了怎么在C中得到B的window呢?
这些window对象是有层级关系的, A是父窗口, 它有B和C两个子window, B,C是兄弟关系, 我不知道能不能直接获取兄弟frame, 反正我查了资料没有找到, 但可以由C-->A-->B的方式获取, 即通过父窗口作为过渡:
C页面中获取B页,面window的代码如下:
<script language=”….”>
   var a = window.parent; //获取A的window对象
   var b = a.frames[“b”]; // A有两个子window, 根据frame的name获得指定的子窗口
   var doc = b.document; //获取到b窗口的document对象
   // 接下来就可以使用b窗口的document对象来操作B.html了
   alert(doc.getElementById(“xx”).value);
</script>


注意: var b = a.frames[“b”]是通过frame的name值获取,如果页面中有多个frameset时,即如下这种情况在IE和chrome上可能获取不到:
<frameset rows=”20,*” name="one">
	<frame src=”top.html” name=”top”>
	<frameset cols="20,*" name="two">
             <frame src="left.html" name="left">
             <frame src="right.html" name="right">
        </frameset>
</frameset>

这中情况下, 如果right.html中想获取top.html中的内容,用window.parent.parent.frames["top"]获取top所对应的window对象在IE和chrome中不可以,但可以用window.parent.parent.frames[0]获取,IE,FireFox,chrome都可以, 因为window.parent.parent得到的是name="one"的frameset, 它有两个window子对象,索引为0的就是top.

如果frameset的层级很多, 不知道要用几个parent才能到达,可以用IE的开发人员工具调试js代码, 选中window.parent.parent点击右键, 添加监控, 在右侧会出现它的值,依次展开找到document-->body-->innerHTML的值,看这个值你就知道当前的parent已经到哪个frameset了.
记得是IE浏览器, 我这里其余浏览器里只能找到document,找不到body和innerHTML


2,你能实现点击B.html中的按钮改变name=”c” 的frame的src属性吗?
<script>
    var a = window.parent; //得到A的window
    a.document.getElementById(“c”).src=”你的值”; //两个frame标签是A的东西
</script>
分享到:
评论

相关推荐

    在iframe、frame之间,js的相互访问、修改

    当我们谈论在`iframe`、`frame`之间通过JavaScript进行相互访问和修改时,涉及到的知识点主要包括DOM操作、跨域安全、同源策略以及一些特殊的技术和技巧。 1. 同源策略:同源策略是浏览器为了保障用户信息安全而...

    frame之间以及子页面和父页面间参数传递

    ### Frame之间及子页面与父页面间的参数传递 在Web开发中,特别是在使用JSP(Java Server Pages)技术时,经常需要实现不同`frame`之间的数据交互或子页面与父页面之间的参数传递。这种功能在实际应用中非常常见,...

    frame,iframe,中的js的相互访问示例

    本文将深入探讨如何在`frame`和`iframe`之间进行JavaScript(JS)的相互访问,以及相关的知识点。 1. **frame与iframe的区别** - `frame`是HTML4中的元素,它被用作`frameset`的一部分,用来分割窗口或框架。而`...

    如何在框架(frame)页面之间使用appendChild()?

    例如,如果你有一个名为`frame1`的框架,你可以通过`window.frames['frame1']`或`document.getElementsByTagName('iframe')[0]`来获取它。 2. **框架间通信**:由于同源策略的限制,只有相同源的框架才能互相访问...

    MFC View Doc Frame关系指针

    理解这三个类之间的关系及其相互作用对于开发MFC应用程序至关重要。 1. Document(文档)类: 文档类(如CDocument)是数据模型的代表,它存储和管理应用程序的核心数据。每个文档可以有多个视图,但每个视图都...

    JS中FRAME的操作问题实例分析

    以上图为例,在这里把frame之间的互相操作简单列为:1变量2方法3页面之间元素的互相获取。 一、 首先从 父(frameABC)——-&gt;子(frameA,frameB,frameC) ① 访问变量名name 假如在frameABC中操作那么可以: 代码如下:...

    digit_photo_frame

    - **像素处理**:掌握16/24/32位色彩模型及其相互转换的方法,实现图像的像素级操作。 ##### 10. 网络应用及CGI应用 - **HTTP协议**:理解HTTP协议的基本原理和请求/响应模型。 - **TCP连接**:掌握TCP连接的建立和...

    WPF的Window窗口与Page页相互调用demo

    本示例将探讨如何在WPF中实现Window窗口与Page页之间的相互调用,构建一个简单的导航框架。 首先,了解Window和Page的基本概念: 1. **Window**: WPF中的顶级窗口,它可以包含多个元素,如ContentControl、Canvas等...

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

    在这个场景下,涉及到的一个常见需求就是如何用JavaScript在主页面与`iframe`页面之间互相调用函数,以便于进行更复杂的交互。 标题提到的问题是在各种浏览器中,尤其是考虑到跨浏览器兼容性时,如何用JS实现主页面...

    一个宿主页面当中嵌入2个XAML页面并互相调用

    这里,我们首先获取了`Page2Frame`的内容,假设它是Page2实例,然后调用了它的`CallFromPage1()`方法。 同样,我们需要在Page2.xaml的代码后面定义这个方法: ```csharp public void CallFromPage1() { // 在这里...

    javascript框架相互引用

    ### JavaScript框架相互引用详解 ...总之,通过理解框架与`window`对象之间的关系及其提供的各种属性,我们可以轻松实现不同层次框架之间的相互引用和通信。这对于构建复杂的网页布局或应用程序来说是非常有用的技巧。

    iframe父与子、子与子之间控制以及js相互调用实际例

    - `contentWindow` 属性:通过`iframe`元素的`contentWindow`属性,我们可以获取到iframe内部的`window`对象,从而调用其上的方法或修改DOM。 - `window.postMessage()` 方法:这是一个安全的跨域通信方式,允许两...

    window窗体与wpf窗体相互调用

    标题"window窗体与wpf窗体相互调用"所涉及的就是这种跨技术栈的通信。下面将详细介绍如何在WinForms和WPF之间实现互调用,并提供相关的C#编程实践。 1. WinForms调用WPF 当你需要在WinForms项目中使用WPF组件或...

    js与applet相互调用的方法.docx

    本文将详细介绍JS与Applet之间相互调用的方法,包括JS调用Java Applet以及Java Applet调用JS的实现技巧。 #### 二、JS调用Java Applet 在HTML页面中嵌入Java Applet后,可以通过JavaScript来调用Applet中的方法,...

    Python中列表list以及list与数组array的相互转换实现方法

    本文主要介绍了Python中列表(`list`)以及列表与数组(`array`)之间的相互转换方法。列表是Python中最基础的数据结构之一,支持灵活地添加和删除元素。数组则更适合于数值计算,提供更高效的内存管理和运算性能。通过...

    matlab实现视频和图像的相互转换

    在MATLAB中,进行视频和图像的相互转换是一项常见的任务,尤其对于图像处理和计算机视觉研究者来说。MATLAB提供了一系列强大的工具箱,如Image Processing Toolbox和Video Toolbox,使得这样的操作变得简单易行。...

    JS和OC代码互相调用

    本文将详细介绍如何实现JS与OC代码之间的互相调用,以及它们各自的优势和应用场景。 一、JavaScript调用Objective-C 1. UIWebView:在早期,iOS应用通过UIWebView加载网页内容,UIWebView提供了`...

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

    本文将通过一个具体的示例介绍如何实现iframe中的父页面与子页面之间的互相调用,以及子页面中再嵌套iframe时的相关操作。 #### 1. 基本概念 首先我们需要了解几个基本的概念: - **父页面(Parent Frame)**:指...

Global site tag (gtag.js) - Google Analytics