今天，一群友问到跨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. EntityFrameWork关系映射

    转:http://kb.cnblogs.com/page/108643/ Entity Framework 实体关系总结 作者: dudu  来源: 博客园  发布时间: 2011-10-28 20: ...

  2. /bin/bash: line 0: fg: no job control一般解决方法

    測试版本号:CDH5.0,(Hadoop2.3) 在使用windows调用Hadoop yarn平台的时候,一般都会遇到例如以下的错误: 2014-05-28 17:32:19,761 WARN or ...

  3. mysql常用知识点

    --存储过程及常用流程控制语法 /*该代码是创建了一个名叫"p4"的存储过程并设置了s1,s2,s3两个int型一个varchar型参数,还可以是其他数据类型,内部创建了x1,x2 ...

  4. BIOS 深入学习 转

    http://blog.csdn.net/lightseed/article/category/547391

  5. java中十进制转二进制转换函数

    十进制转成十六进制: Integer.toHexString(int i) 十进制转成八进制 Integer.toOctalString(int i) 十进制转成二进制 Integer.toBinar ...

  6. 四元数（Quaternion）和旋转

    四元数介绍 旋转,应该是三种坐标变换——缩放.旋转和平移,中最复杂的一种了.大家应该都听过,有一种旋转的表示方法叫四元数.按照我们的习惯,我们更加熟悉的是另外两种旋转的表示方法——矩阵旋转和欧拉旋转. ...

  7. 基于ARM-LINUX的温度传感器驱动-DS18B20

    转载:http://blog.csdn.net/ayangke/article/details/6883244 作者:冯建,华清远见嵌入式学院讲师. DS18B20数字温度传感器接线方便,封装成后可应 ...

  8. LeetCode46,47 Permutations, Permutations II

    题目: LeetCode46 I Given a collection of distinct numbers, return all possible permutations. (Medium) ...

  9. excel 批量替换换行符

    在excel批量替换换行符操作步骤: 全选需要查找换行符的范围 CTRL+H调出查找和替换 在查找内容内输入"ctrl+enter"两个组合键 点击查找全部即可. 在excel中输 ...

  10. JavaScript组成

    JavaScript由ECMAScript,Dom,Bom三部分组成. ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufa ...