今天，一群友问到跨frame操作dom元素的问题。于是写了个demo，在此发表在博客里面，供其他同道中人参考！

创建child.html内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=GB18030" />

        <title>每次点击按钮之后重新在浏览器地址栏回车</title>

		<script type="text/javascript">

			function setParentVal2Child_02(){

				var txt = window.parent.document.getElementById("parent_01").value;

				document.getElementById("child_01").value=txt;

			}

			function setChildVal2Parent_02(){

				var txt = document.getElementById("child_02").value;

				window.parent.document.getElementById("parent_02").value=txt;

			}

		</script>

    </head>

    <body style="background-color:red">

    	<input type="button" value="setParentVal2Child" onclick="setParentVal2Child_02()">

		<input type="button" value="setChildVal2Parent" onclick="setChildVal2Parent_02()">

		<p></p>

    	childVal_01:<input type="text" value="CCCC" id="child_01">

		childVal_02:<input type="text" value="DDDD" id="child_02">

    </body>

</html>

 创建index.html，内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=GB18030" />

        <title>每次点击按钮之后重新在浏览器地址栏回车</title>

		<script type="text/javascript">

			function setParentVal2Child_01(){

				var txt=document.getElementById("parent_01").value;

				window.frames['child'].document.getElementById("child_01").value=txt;

			}

			function setChildVal2Parent_01(){

				var txt=window.frames['child'].document.getElementById("child_02").value;

				document.getElementById("parent_02").value=txt;

			}

		</script>

    </head>

    <body>

    	<input type="button" value="setParentVal2Child" onclick="setParentVal2Child_01()">

		<input type="button" value="setChildVal2Parent" onclick="setChildVal2Parent_01()">

		<p></p>

		parentVal_01:<input type="text" value="AAAA" id="parent_01">

		parentVal_02:<input type="text" value="BBBB" id="parent_02">

		<p></p>

		<iframe src="child.html" width="800" height="300" frameborder="1" name="child"></iframe>

    </body>

</html>

 预览效果！如图：

 

布局说明：红色部分为子frame。

功能说明：

点击"setParentVal2Child"按钮会把父frame里面的parentVal_01的值赋给childVal_01。

点击"setChildVal2Parent"按钮会把子frame里面的childVal_02的值赋给parentVal_02。

 

友情提示：

1.分别实现了在父frame和子frame里面进行子和父的传值操作！

2.window.parent获取直接父窗体，window.top获取顶级父窗体

3.源码见附件

跨frame操作dom元素的更多相关文章

  1. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  2. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  3. JQUERY选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  4. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

  5. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  6. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  7. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  8. 不获取元素，直接使用id操作dom元素

    今天无意中发现个让我很吃惊的问题. 不使用getElementById方法,也可以用id直接操作有id的元素. 继续搜索后,发现name也可以直接操作... 这让我大感意外,了解以后,忍不住写点东西记 ...

  9. vue操作dom元素

    传统的方法获取dom元素操作dom,通常是获取类名,id,属性等来获取到dom,但在vue中获取组件dom的话会有问题,请看下面代码: 控制台打印出来的结果如下,你会发现正常标签可以正常显示,但是组件 ...

随机推荐

  1. Java虚拟机工作原理具体解释

    一.类载入器 首先来看一下java程序的运行过程. 从这个框图非常easy大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘其中.然后你在命令行中输入 javac YourClass ...

  2. IOS编程之相机和相册

    概述 IOS设备中的相机和相册,是我们在项目开发中经常会使用到的多媒体元素,使用相机可以获得最新想要的照片,而使用相册则可以访问IOS设备中的图片资源 使用IOS设备中的相机/相册获得图片资源 是否允 ...

  3. QWT6.0.1+win7下安装说明

    A) 简介 1.QWT是一个基于LGPL版权协议的开源项目, 可生成各种统计图.它为具有技术专业背景的程序提供GUI组件和一组实用类,其目标是以基于2D方式的窗体部件来显示数据, 数据源以数值,数组或 ...

  4. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  5. c++ 设计模式7 （Bridge 桥模式）

    4.2 Bridge 桥模式 动机: 由于某些类型的固有的实现逻辑,使得它们具有两个变化的维度,乃至多个变化的维度. 代码示例: 实现一个Messager,含有基本功能PlaySound,Connec ...

  6. WPF 之 资源（Resource）

    1.什么叫WPF的资源(Resource)? 资源是保存在可执行文件中的一种不可执行数据.在WPF的资源中,几乎可以包含图像.字符串等所有的任意CLR对象,只要对象有一个默认的构造函数和独立的属性. ...

  7. Json.Net学习.集合序列化.

    只要集合实现了IEnumable接口就可以进行序列化 Json序列化器为序列化及反序列化集合对象提供了良好的支持. ->Serializing 为了序列化一个集合---一个泛型的list,arr ...

  8. Play on Words 欧拉通路（回路）判断

    Play on Words note:  判断一下连通性. #include <iostream> #include <cstdio> #include <cstring ...

  9. Redis缓存异常的容错实现方法( .net)

    using DotNet.Log; /// <summary> /// Redis缓存辅助类 /// /// 修改纪录 /// /// 2015-10-26 版本:1.0 SongBiao ...

  10. iOS 中的XML解析代码（SAX）

    1.XML解析(SAX) NSXMLParser SAX 大文件 1)打开文档 - (void)parserDidStartDocument:(NSXMLParser *)parser 2)开始查找起 ...