跨frame操作dom元素
今天,一群友问到跨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元素的更多相关文章
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- JS/JQuery操作DOM元素笔记
原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- 在vue中操作dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...
- 不获取元素,直接使用id操作dom元素
今天无意中发现个让我很吃惊的问题. 不使用getElementById方法,也可以用id直接操作有id的元素. 继续搜索后,发现name也可以直接操作... 这让我大感意外,了解以后,忍不住写点东西记 ...
- vue操作dom元素
传统的方法获取dom元素操作dom,通常是获取类名,id,属性等来获取到dom,但在vue中获取组件dom的话会有问题,请看下面代码: 控制台打印出来的结果如下,你会发现正常标签可以正常显示,但是组件 ...
随机推荐
- Swift - 本地消息的推送通知(附样例)
使用UILocalNotification可以很方便的实现消息的推送功能.我们可以设置这个消息的推送时间,推送内容等. 当推送时间一到,不管用户在桌面还是其他应用中,屏幕上方会都显示出推送消息. 1, ...
- lambda形式(转)
lambda语句被用来创建新的函数对象,并且在运行时返回它们. 使用lambda形式 #!/usr/bin/python# Filename: lambda.py def make_repeater( ...
- 云服务器 ECS Linux 系统中常见的日志文件介绍
云服务器 ECS Linux 系统中,日志文件是非常重要的文件,它们记录了很多系统中重要的事.Linux 系统中常见日志文件概述如下: /var/log/cron可以在 cron 文件中检查 cron ...
- gpus_ReturnGuiltyForHardwareRestart 错误
经查出是glScissor长宽不能为0,在某些设备上会出问题
- Django之牛逼的Models
Django里的模型是对数据库对表的一次封装,是应用业务与数据之间的桥梁 要想使用Django的models 首先得配置settings Django默认使用的是sqlite,我使用的Mysql,配置 ...
- UIWebView获得内容的高 高度自适应 宽度自适应
UIWebView获得内容的高-作出自适应高的UIWebView- (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *height ...
- 正试图在 os 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码
来自:http://www.cnblogs.com/lcxu2/archive/2011/01/16/2004016.html 正试图在 os 加载程序锁内执行托管代码.不要尝试在 DllMain 或 ...
- linux之磁盘配额(quota)
1.什么是quota 简单的说就是限制用户对磁盘空间的使用量. 因为Linux是多用户多任务的操作系统,许多人共用磁盘空间,为了合理的分配磁盘空间,于是就有了quota的出现. 2.quota的用途 ...
- Linux的SOCKET编程详解
1. 网络中进程之间如何通信 进 程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进 程之间既互不干扰又协调一致工作,操作系统为进程通信提供了相应设施,如 U ...
- ionic中input框禁止输入问题
其实这个问题在之后沥青思路之后觉得还是挺好实现的,没有思路的时候真是找不到头绪~ 功能的描述为:当输入框中没有内容时,允许用户编辑:当其中有内容时不允许用户编辑,只有当用户点击编辑按钮后,才可允许编辑 ...