在子页面操作父页面元素和iframe说明
实现功能:在子页面操作父页面元素。
在实际编码的过程中,大家一定有这种需求:在父级页面有一个<iframe scrolling='auto'></iframe>内联框架,而我们需要在iframe的子页面里对父页面的元素进行操作。下面我就实际代码展示一下。
父级页面
<div id="fatherHtml">
<div id="button1"><h2>这是父级页面</h2></div>
<iframe scrolling='auto'></iframe>
</div
子级页面
<html>
<head></head>
<body>
<div>
<div>这是子页面</div>
<button id="clickButton">点击我</button>
</div>
</body>
</html>
<script>
$(function(){
window.parent.$("#button1").click(function(){//window.parent.$("#button1")就获取到了父级页面的div元素
$.ajax({
url : '<%=serverIp%>/webcons.do?method=cancellationAccountBiocuration',
type: "get",
dataType:"json",
success:function(data) {
window.parent.$("body").css("overflow","scroll");
window.parent.$("#mask").remove();
window.parent.$("#middleDiv").remove();
}
})
})
})
</script>
iframe参数说明
src : src 属性规定嵌入在 <iframe> 中的文档的地址。
语法 :<iframe src="URL">
URL可能的值:
1、绝对 URL - 指向另一个网站(比如 src="http://www.example.com/default.htm");
2、相对 URL - 指向网站中的一个文件(比如 src="default.htm")
frameborder:规定是否显示 <iframe> 周围的边框。
可能的值:
1 :默认,开启边框;
2:关闭边框
scrolling :规定是否在 <iframe> 中显示滚动条。默认地,如果内容超出了 <iframe>,滚动条就会出现在 <iframe> 中。
语法:<iframe scrolling="auto|yes|no">
可能的值:
auto:在需要的情况下出现滚动条(默认值)。
yes:始终显示滚动条(即使不需要)。
no:从不显示滚动条(即使需要)。
window.parent 说明
功能:返回父窗口。
语法:window.parent
注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。
在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function openWin(){
window.open('','','width=200,height=100');
alert(window.parent.location);
}
</script>
</head>
<body> <input type="button" value="打开窗口" onclick="openWin()"> </body>
</html>
示例效果:

在子页面操作父页面元素和iframe说明的更多相关文章
- JQueryiframe页面操作父页面中的元素与方法(实例讲解)
1)在iframe中查找父页面元素的方法:$('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量:parent.methodparent.v ...
- iframe子页面操作父页面并实现屏蔽页面弹出层效果
- js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
- 使用iframe父页面调用子页面和子页面调用父页面的元素与方法
在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...
- iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素
一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...
- jQuery子页面获取父页面元素
$("input[type='checkbox']:checked",window.opener.document);//适用于打开窗口的父页面元素获取 $("input ...
- iframe子页面获取父页面元素的方法
在iframe子页面获取父页面元素 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: $("#objid" ...
- AppBox v6.0中实现子页面和父页面的复杂交互
前言 1. AppBox是捐赠开源(获取源代码至少需要捐赠作者 1 元钱),基于的 FineUI(开源版)则是完整开源,网址:http://fineui.codeplex.com/ 2. 你可以通过捐 ...
- jquery读取iframe子页面和父页面的处理
1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...
随机推荐
- 绑定方法与非绑定方法 classmethod和staticmethod
一:绑定方法:特点:绑定给谁就应该是由谁来调用,谁来调用就会将谁当做第一个参数传入 1:绑定给对象的方法:类中定义的函数默认就是绑定给对象的 例: 2:绑定给类的方法:为类中定义的函数加 ...
- Windows 用bat脚本带配置启动redis,并用vb脚本使其在后台运行。
最近,在Windows上用开发PHP程序,需要用到Redis,每天要打开一个运行redis-server.exe的窗口这样比较烦,因为窗口就一直打开着,不能关闭. 所以就想着通过写脚本的方式,让他在后 ...
- Angular 学习笔记 (Material Datepicker)
https://material.angular.io/components/datepicker/overview 官网介绍很清楚了,这里记入一下我比较不熟悉的. 1. moment js Angu ...
- spark中的combineByKey函数的用法
一.函数的源码 /** * Simplified version of combineByKeyWithClassTag that hash-partitions the resulting RDD ...
- React文档(十)表单
HTML表单元素和 React里的其他DOM元素有些不同,因为它们会保留一些内部的状态.举个例子,这个普通的表单接受唯一的name值: <form> <label> Name: ...
- DNS及DNS有什么作用
什么是DNS,DNS有什么作用: DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直 ...
- nio 序列化
1.序列化 public class SerializeUtils<T extends Serializable> { public byte[] serialize(T t) { byt ...
- Python Flask框架
Python有很多Web框架,可谓是百家争鸣,我这里列出几个比较叼的几个框架 Django 市场占有率最高,官方文档几近完美,但是适合比较大的项目,小项目会显得累赘. Tornado ...
- day18_python_1124
01 鸡汤 荷花定律 山竹定律 金蝉定律 荷花定律: 明天比今天要生长多一倍,池塘三十天生长满,第29天是一半. 山竹定律: 竹子在生长时,前三年只出地表3厘米,从第四年开始,以每天30cm的速度开始 ...
- python中字符串格式化
username='小黑'age=18high=1.88s2='欢迎%s,年龄是%d,身高是%.2f'%(username,age,high)#%s是通用的,%d就必须传整数,%f就必须是小数,想保留 ...