从父页面读取和操作iframe中内容方法_javascript技巧

基本的操作方法:
document.frames("frame_id").document.action;
其中,frame_id是该父页面需要进行操作的iframe的id,action是iframe中的相关操作。
从该方法中,可以看出 document.frames("frame_id")是用来从父页面中获取iframe的id的,而后面的document.action同一般的脚本对页面元素操作一样,具体举个例子来说明一下,其中父页面引用iframe部分如下:

复制代码 代码如下:

<div id="region1" name="region1">
<iframe onload="iframe_test()" frameborder="0" scrolling="no" width="100%" height="500" name="test_iframe" id="test_iframe" src="/testIframe.jsp" src="testIframe.jsp"></iframe>
</div>

testIframe.jsp如下:

复制代码 代码如下:

<%@ page language= "java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title>test_iframe</title>
</head>
<body>
<table class="data_form" align="center">
<tr>
<th>testname</th>
<td><input name="testname" type="text" id="testname" value="testname" ></td>
</tr>
<tr>
<th>description</th>
<td><input name="decription" type="text" id="decription" value="testname" /></td>
</tr>
</table>
<br>
<div >
<input name="fs" type="submit" id="fs" value="test" onClick="alert('test');" class="button">
</div>
</body>
</html>

父页面中对iframe元素操作的script脚本如下:

复制代码 代码如下:

<script type="text/javascript"><!--
function iframe_test(){
if (document.frames("test_iframe").document.getElementById("testname").value=="testname")
{
alert("test successful!");
}
if(document.frames("test_iframe").document.getElementById("decription").value=="")
{
document.frames("test_iframe").document.getElementById("decription").value="description"
}
}
// --></script>

此例描述了在父页面中读取iframe中元素以及在父页面中修改iframe中元素的属性。

通过此例,我们可以看出,在父页面中访问iframe中的各个元素与一般的访问页面元素无本质区别,无非是需要在父页面中事先获取需要处理的iframe对象,在获取iframe对象后,其操作基本没什么特别之处。

时间: 2024-09-15 02:09:32

从父页面读取和操作iframe中内容方法_javascript技巧的相关文章

JS实现刷新父页面不弹出提示框的方法_javascript技巧

本文实例讲述了JS实现刷新父页面不弹出提示框的方法.分享给大家供大家参考,具体如下: A页面 open方式出 B页面 ,当B页面做了类如保存动作后,需要关闭B页面,刷新A页面的情况下,会弹出一个提示框,要求点重试,这个就是发生预料之外的情况,用户体验很差. 解决方案分两种情况: 1.A页面很简单的情况(没有frame/iframe) 在B页面中的function中: function close(){ window.opener.location.reload(); window.opener

原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法_javascript技巧

用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html判断当前页面是否在iframe中的实例_javascript技巧

在做HTML页面的时候,经常会遇到"如果当前页面显示在iframe中,我们就相应的处理" 判断方法为: //判断是否在iframe中 if(self!=top){ parent.window.location.replace(window.location.href); } 以上这篇html判断当前页面是否在iframe中的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持. 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内

PHP页面跳转操作实例分析(header方法)_php技巧

本文实例分析了PHP页面跳转操作.分享给大家供大家参考,具体如下: 跳转 header()为php函数,向浏览器发送指定命令 html: <meta http-equiv="Refresh" content="3;url=other.php"/> 立即跳转: header('Location:other.php'); //file_put_contents('bee.txt','execute'); die; 执行header时候,并不是立即结束,而是会

js判断鼠标位置是否在某个div中的方法_javascript技巧

本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在

JS实现页面跳转参数不丢失的方法_javascript技巧

本文实例讲述了JS实现页面跳转参数不丢失的方法.分享给大家供大家参考,具体如下: 需求:页面编辑后,返回列表页面,参数不丢失,能够记住页数以及筛选条件. 我坚信,不管白猫黑猫,能捉到耗子的就是好猫,当然如果能够高效的,简单的处理最好. 我的思路就是,把列表页面地址作为参数传递过去. 这里就会面临一个问题,url本身就是由多个参数组成的,这样纯粹的传递,就会出问题,参数丢失. 所以要对url进行加密. escape().encodeURI().encodeURIComponent() JavaSc

js实现同一页面多个不同运动效果的方法_javascript技巧

本文实例讲述了js实现同一页面多个不同运动效果的方法.分享给大家供大家参考.具体分析如下: 要点一: function getstyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } 从样式表中根据id和属性名取值. 要点二: if(attr == "opacity"){ cur = Math.rou

用javascript动态调整iframe高度的方法_javascript技巧

当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体.这时候你会设置 scrolling="no" 属性.但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住.这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度.如果需要调

JS判断当前页面是否在微信浏览器打开的方法_javascript技巧

本文实例讲述了JS判断当前页面是否在微信浏览器打开的方法.分享给大家供大家参考,具体如下: 最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面.通过js就可以判断当前页面是在什么浏览器打开的. 以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开.当然可以