今天，一群友问到跨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. 关于去除Dialog的黑色背景框

    Dialog有两种形式的,一个是Dialog及其子类,还有一种是Activity的Dialog显示方式. 不管怎样,在自定义Dialog的时候,如果不做一些处理,都会出现黑色背景边框,这个问题动不动就 ...

  2. cocos2d-x中CCScale9Sprite的另一种实现

    cocos2d 2.0之后加入了一种九宫格的实现,主要作用是用来拉伸图片,这样的好处在于保留图片四个角不变形的同时,对图片中间部分进行拉伸,来满足一些控件的自适应(PS: 比如包括按钮,对话框,最直观 ...

  3. LINUX O_Direact

    http://laokaddk.blog.51cto.com/368606/699563

  4. CSRF 攻击的应对之道--转

    http://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/ 简介: CSRF(Cross Site Request Forgery, 跨站域 ...

  5. docker 中运行 redis 服务

    先使用 dockerfile 创建一个 redis 容器 FROM ubuntu:latest RUN apt-get update RUN apt-get -y install redis-serv ...

  6. FMDB 二次封装工具类，让你快速学会封装，集成数据库

    来源:StrivEver 链接:http://www.jianshu.com/p/4c77aee0b41c 上个版本为了增加用户体验,部分页面集成了离线缓存数据功能,于是就在项目里使用了数据库管理离线 ...

  7. .net 4.0 运行时中运行.net2.0开发的程序

    其调用的方法是从sqlite数据库中获取原来已经使用过的数据库连接,当时也没注意,就是准备设断点然后单步调试,结果竟然是断点无法进入方法体内,后来仔细看了一下方法体的时候发现了一个问题,就是现有的Sy ...

  8. C# mvc--EF中查询的本质

    UI层我直接用了窗体程序. 好了 不罗嗦 直接上代码…… private void button1_Click(object sender, EventArgs e) { //1.0创建EF上下文容器 ...

  9. 1.6.2 Uploading Data with Index Handlers

    1.Uploading Data with Index Handlers 索引处理器就是Request Handlers,用于添加,更新,删除索引中的文档.另外,使用Tika抽取富文档数据,使用Dat ...

  10. ls与dir的区别

    1.ls具有上色的效果,dir没有. 2.ls是unix/linux系列的命令,dir是dos/windows系列的命令.