今天，一群友问到跨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. Swift2.0 中的String（一）：常用属性

    字符串算是平常用的比较多.花样也比较多的一个类型,昨天有空把相关的一些常用操作都写了一遍,总结出来.其实iOS里面的字符串更复杂,还有NSString系列等等,那些API太多将来需要用的时候再慢慢学. ...

  2. Swift - 本地消息的推送通知（附样例）

    使用UILocalNotification可以很方便的实现消息的推送功能.我们可以设置这个消息的推送时间,推送内容等. 当推送时间一到,不管用户在桌面还是其他应用中,屏幕上方会都显示出推送消息. 1, ...

  3. QStyle

    转贴: http://hi.baidu.com/yjj2008/blog/item/6cd4a1892ef0d4b60f2444a5.html 本文介绍了如何使用qt提供的接口来设计自己的GUI风格( ...

  4. PHP header 的几种用法

    跳转页面 header('Location:'.$url); //Location和":"之间无空格. 声明content-type header('content-type:te ...

  5. Android获取网页上的图片的代码

    public Bitmap getWebBitmap(String imgUrl) { Bitmap bitmap =null; try { InputStream inputStream = nul ...

  6. spark1.2.0安装

    standalone 安装SCALA 下载.解压.加入环境变量 安装spark1.2.0 下载.解压.加入环境变量 tar zxvf spark--bin-.tgz export SPARK_HOME ...

  7. SqlServer 之 查看表空间

    一.用到系统视图 sys.sysindexes 该视图定义如下: CREATE VIEW sys.sysindexes AS SELECT id, status = convert(int, end ...

  8. NS_ENUM和NS_OPTIONS区别

    首先,NS_ENUM和NS_OPTIONS都是宏. Foundation框架中定义了一些辅助的宏,用这些宏来定义枚举类型时,也可以指定用于保存枚举值的底层数据类型.这些宏具有向后兼容能力,如果目标平台 ...

  9. css 所有选择器

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  10. [转]WPF 获取程序启动路径

    本文转自:http://hi.baidu.com/lilipangtou/item/f1b7488e3c92c4d05e0ec1ab 在Windows Form程序中,获取自身的启动目录是非常容易的, ...