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 ...
随机推荐
- 老李分享：持续集成学好jenkins之解答疑问
老李分享:持续集成学好jenkins之解答疑问 poptest(www.poptest.cn)在培训的过程中使用jenkins搭建持续集成环境,让学员真正交流持续集成到底是什么,怎么去做的. Je ...
- 老李分享：大数据框架Hadoop和Spark的异同 1
老李分享:大数据框架Hadoop和Spark的异同 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨 ...
- 老李推荐：第6章8节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-小结
老李推荐:第6章8节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-小结 本章我们重点围绕处理网络过来的命令的MonkeySourceNetwork这个事 ...
- 老李分享：jvm垃圾回收
老李分享:jvm垃圾回收 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478 ...
- Android线程池使用终结版
有一段时间没写博文了,今天抽空总结一下,也希望能通过自己写的这些文章,加深理解的同时能帮 助在技术方面有疑点的朋友搞清楚个所以然来,由于经常会在网上或群里看到有朋友会问线程方面的 东西,就像我一个朋友 ...
- mysql 分析3使用分析sql 性能 show profiles ;
show variables like '%profiling%'; 查看状态 查看时间去哪了``` set profiling=1;// 打开 show profiles; 查看执行过的 ...
- 网站与域名知识扫盲-DNS
域名概述 域名的概念 IP地址不易记忆 早期使用Hosts解析域名 主机名称重复 主机维护困难 DNS(Domain Name System 域名系统) 分布式 层次性 域名空间结构 根域 组织域[. ...
- NOIP2014D2T2寻找道路
洛谷传送门 这道题可以把边都反着存一遍,从终点开始深搜,然后把到不了的点 和它们所指向的点都去掉. 最后在剩余的点里跑一遍spfa就可以了. --代码 #include <cstdio> ...
- iOS 播放GIf图, 动态效果
一.如果你集成了SDWebImage , 有一个很简单的方法 //导入sdwebImage的某个头文件 #import "UIImage+GIF.h" _bubble1.backg ...
- windows和linux双系统修改启动项
在windows系统的基础上再装linux系统的时候,电脑启动就会出现linux的启动引导项,默认的是进入linux.要使电脑默认进入windows只需要修改linux系统的启动引导文件(grub.c ...