今天，一群友问到跨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. getFields()和getDeclaredFields（）

    getFields()获得某个类的所有的公共(public)的字段,包括父类. getDeclaredFields()获得某个类的所有申明的字段,即包括public.private和proteced, ...

  2. 用iDSDT制作声显卡DSDT

    已有 2299 次阅读2011-10-24 21:00 |个人分类:Mac| DSDT 快速增加积分秘笈! windows下!--------------------------------第一步.下 ...

  3. qregularexpression和qregexp的区别

    QRegularExpression 是Qt 5.0才引进的,相对于QRegExp,QRegularExpression class修复了很多bug,提高了效率,提供了对Perl的RegEx几乎全面兼 ...

  4. PHP版根据经纬度和半径计算出经纬度的范围

    百度地图提供了范围搜索的功能,但是它使用的是百度自己的数据,但是有时候我们需要使用自己的数据,显示在地图上.比如给定两个参数:指定位置(某一处的经纬度lnglat)和搜索半径(r),搜索指定范围内的数 ...

  5. Java基础知识强化之多线程笔记06：Lock接口 （区别于Synchronized块）

    1. 简介 我们讲到了如何使用关键字synchronized来实现同步访问.本文我们继续来探讨这个问题,从Java 5之后,在java.util.concurrent.locks包下提供了另外一种方式 ...

  6. iOS - 提示信息 - UIAlertView、UIActionSheet、UIAlertController的实际应用

    1.UIAlertView(屏幕中央弹出框)(不需要服从代理) UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@" ...

  7. redis存储对象，实体类新加字段空指针问题处理

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  8. 获取数组排序后的index算法实现

    需求: 一个数组var arr = [4,7,2,9],排序后的新数组var newArr = [2,4,7,9]或者[9,7,4,2] 我们要得到的是排序后元数组的每一项在新数组中的位置所构成的数组 ...

  9. 剑指Offer06 旋转数组的最小值

    /************************************************************************* > File Name: 06_MinNum ...

  10. Java多线程之线程池

    现在是多核的时代,面向多核的编程很重要,因此基于java的并发和多线程开发非常重要. 线程池是于队列密切相关的,其中队列保存了所有等待执行的任务.工作者线程的任务很简单:从队列中获取一个任务,执行任务 ...