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 ...
随机推荐
- XJOI1424解压字符串
解压字符串 给你一个字符串S,S是已经被加密过的字符串.现在要求你把字符串S还原.字符串S可能会出现这样的格式:k(q),它表示字符串q重复了k次,其中q是0个或多个字符,而k是一个数字,范围是0至9 ...
- poptest老李谈Socket
poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...
- javascript执行顺序小结
作为web开发人员,一定要对js的执行顺序,解析原理有一定了解,否则无法掌控这门小巧好用的语言 javascript是一门实现网页动态效果的语言,也是主要负责和服务端的交互,他抛弃了像java中类的束 ...
- JAVA加密算法系列-MD5
package **; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; publi ...
- Struts2基础学习(八)—Struts2防止表单重复提交
一.原因 用户重复提交表单在某些场合将会造成非常严重的后果.例如,在使用信用卡进行在线支付的时候,如果服务器的响应速度太 慢,用户有可能会多次点击提交按钮,而这可能导致那张信用卡上的金额被消 ...
- C#委托冒泡
委托的实现,就是编译器自行定义了一个类:有三个重要参数1.制定操作对象,2.指定委托方法3.委托链 看如下一个列子: class DelegatePratice { public static voi ...
- Linux 入门笔记
一开始对linux总有些抵触,黑黑的命令框不知道如何下手,这次因为工作交接的缘故需要负责之前同事的Node后端部分,node,redis这些都是部署在Linux上的,看了几次运维的同学噼里啪啦的敲命令 ...
- require.js入门
小颖目前所在的公司在用require.js,小颖一只说要写个小demo,今天抽空把自己写的小demo分享出来,希望对初学者有一些帮助,嘻嘻 学习资料: CSDN上的一篇文章:使用RequireJS优化 ...
- UPS不间断电源网络功能介绍
UPS不间断电源网络功能介绍 随着联网技术的善及,用户又向UPS提出了更高的要求:ups电源应具有无人値守的功铅酸蓄电池能,不但具有自检的功能,还应具有联网功能,在网上UPS不间断电源可以随时观察up ...
- 通过virtualbox最小化安装centos 6.3后无法上网解决办法
通过virtualbox最小化安装centos 6.3后无法上网解决办法 1.设置virtualbox的网络连接方式,如下图使用桥接方式,桥接的网卡为宿主正在上网的网卡,现在我是通过无线来上网的,所以 ...