iframe 父子页面方法调用
在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持
iframe具有以下属性:
1、frameborder 设为1代表显示周围边框,设置为0不显示周围边框
2、height 设置iframe的高度
3、width 设置iframe的宽度
4、longdesc 属性值为URL 规定一个页面,该页面包含了有关 iframe 的较长描述
5、marginheight 定义 iframe 的顶部和底部的边距
6、marginwidth 定义 iframe 的左侧和右侧的边距
7、name 规定 iframe 的名称
8、sandbox 启用一系列对 <iframe> 中内容的额外限制。
9、scrolling 设置为 yes 代表显示滚动条,设置为no代表不显示滚动条,设置为auto 代表自动
10、seamless 属性值也是 seamless 规定 <iframe> 看上去像是包含文档的一部分
11、src 规定在 iframe 中显示的文档的 URL
12、srcdoc 规定在 <iframe> 中显示的页面的 HTML 内容
那么在设置好了之后如果在父页面中想要调用子页面的方法,或者在子页面中调用父页面的方法怎么办呢??这个问题网上也很多介绍
父页面
<!DOCTYPE html>
<html >
<head>
<title>Parent Page</title>
<script language="javascript" type="text/javascript">
function parenttest() {
alert("这是父页面的方法!");
}
function btnClick() {
document.getElementById("childframe").contentWindow.childtest();
}
</script>
</head>
<body>
<div style="margin:auto;">
<h1>This is the Parent Page.</h1>
<input type="button" value="调用子页面的方法" onclick="btnClick()"/>
</div>
<div style="margin:auto;">
<iframe style="width:300px; height:300px;" id="childframe" src="son.html"></iframe>
</div>
</body>
</html>
子页面
<!DOCTYPE html>
<html >
<head>
<title>Child Page</title>
<script language="javascript" type="text/javascript">
function childtest() {
alert("这是子页面的方法!");
}
function btnClick() {
window.parent.parenttest();
}
</script>
</head>
<body>
<div style="margin:auto;">
<h1>This is the Child Page.</h1>
<input type="button" value="调用父页面的方法" onclick="btnClick()"/>
</div>
</body>
</html>
这样就可以实现子页面与父页面方法的相互调用,拥有这个方法在处理起来非常的方便。
iframe 父子页面方法调用的更多相关文章
- iframe父子页面相互调用方法,相互获取元素
父页面获取子页面 var childWin = document.getElementById('setIframe').contentWindow;//获取子页面窗口对象 childWin.send ...
- JavaScript 父子页面相互调用总结
父子页面相互调用是一个在开发中经常遇到的问题,但是没有找到过比较全面的文章介绍.在此总结下来,供大家参考. 四种方式 一般情况下,我们可以使用iframe.window的open.showModalD ...
- JQuery javascript实现父子页面相互调用
javascript实现父子页面相互调用 By:授客 QQ:1033553122 场景1 父页面调用子页面 如上图,在iframe子页面的<script>元素中,定义了taskStatus ...
- js和vue方法的相互调用(iframe父子页面的方法相互调用)。
项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...
- iframe父子页面之间相互调用元素和函数
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- iframe父子页面调用小结
子页面调用父页面 $('#Id', window.parent.document); //调用父页面元素 window.parent.func1(); //调用父页面方法 (子页面同理,需将js方 ...
- iframe父子页面互调方法和属性
1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签 ...
- layui 如果调用 from 内嵌入的 iframe子页面方法
(人笨,占时想法的办法,不要骂,不要骂,怕了怕了,想到别的会来改的) 父页面; <%@ page language="java" contentType="text ...
- iframe父子页面js之间的调用
父级页面:mian.html 子页面1:top.html 子页面2:index.html 页面关系 <div onclick="_top()">调用contentTop ...
随机推荐
- Linux批量清理多个文件内容而不删除文件
清理单个文件,可以这样:echo > myLog.log 但是,如果我要清理一堆文件,比如在/logs目录下面的所有以.log结尾的文件的内容,而不删除文件,该如何操作呢? 我一开始的语句是这样 ...
- Omi官方插件系列 - omi-transform介绍
原文链接 - https://github.com/AlloyTeam/omi/tree/master/tutorial 写在前面 Omi框架正式发布了omi-transform作为Omi组件化开发特 ...
- 测试开发Python培训:模拟登录新浪微博-技术篇
测试开发Python培训:模拟登录新浪微博-技术篇 一般一个初学者项目的起点就是登陆功能的自动化,而面临的项目不同实现的技术难度是不一样的,poptest在做测试开发培训中更加关注技术难点,掌握技 ...
- my first blogs(我的处女博)
末夏的夕阳送走一批批下班的人,些许的轻风给一天烦躁的心带来一丝丝的清凉.我倒是挺喜欢在这种天气,提前下了公交车然后漫步回家.这样我能多点时间回顾一天的事情,俗话说是思考人生. 不知不觉毕业两年多了,在 ...
- cmd输入svn提示svn不是内部或外部命令
已经安装了svn,但是在cmd中输入svn命令的时候提示svn不是内部或外部命令是因为没有安装svn client. 解决办法: windows安装svn的时候默认是不安装 svn comand li ...
- 查看Samba用户的方法
有时我们需要查看服务器上都注册了哪些用户,这时我们就可以用下面的命令来查看了. pdbedit可以编辑samba的用户数据库,具体使用方法可以用man查看. pdbedit -L
- JavaScript定时器分析
一.事件循环 JavaScript是单线程,同一个时间只能做一件事情,所以执行任务需要排队.如果前一个耗时很长,那么下一个只能等待. 1)两种任务 为了更好的处理任务,JavaScript语言的设计者 ...
- java 基础知识二 基本类型与运算符
java 基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...
- [Python Web]配置 nginx 遇到错误排查(初级)
配置 nginx 遇到错误排查(初级) 系统版本:ubuntu 14.04,nginx 版本:nginx/1.4.6 (Ubuntu) 本文不是一步步搭建 nginx 的过程,而是我在使用 nginx ...
- 【iOS系列】-多图片多线程异步下载
多图片多线程异步下载 开发中非常常用的就是就是图片下载,我们常用的就是SDWebImage,但是作为开发人员,不仅要能会用,还要知道其原理.本文就会介绍多图下载的实现. 本文中的示例Demno地址,下 ...