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 ...
随机推荐
- 参加光环国际PRINCE2培训
挑战埃及是全球首套能够同时适配PRINCE2认证人群,PMP认证人群的项目管理沙盘演练游戏.沙盘通过使用乐高积木作为道具,通过一场互动性极强的情景模拟为全球项目经理还原了四千年前古埃及金字塔建造的情景 ...
- oracle查询锁表解锁语句
--oracle查询锁表解锁语句--首先要用dba权限的用户登录,建议用system,然后直接看sql吧 --1. 如下语句 查询锁定的表: SELECT l.session_id sid, s.se ...
- 20155231 2016-2017-2 《Java程序设计》第5周学习总结
# 20155231 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 学习目标 理解异常架构 掌握try...catch...finally处理异常的方法 会 ...
- TensorFlow 安装详解
摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! 『不要把手段当成目标 — <一个瑜伽行者的自传>』 本文提纲 1. 机器学习 2 ...
- POPTEST老李谈Debug和Release的区别（c#） 1
POPTEST老李谈Debug和Release的区别(c#) poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...
- 老李案例分享：MAT分析应用程序服务出现内存溢出过程
老李案例分享:MAT分析应用程序服务出现内存溢出过程 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.在poptest的loa ...
- 老李推荐：第6章7节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-注入按键事件实例
老李推荐:第6章7节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-注入按键事件实例 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜 ...
- Oracle dual表的用途
dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下: 1.查看当前用户,可以在 SQL Plus中执行下面语句 sele ...
- Android -- Android下的NDK开发（一）
1,NDK是什么?为什么要进行NDK开发? NDK:Native Development Kit.Android应用运行在Dalvik虚拟机中.NDK允许开发人员使用本地代码语言(例如C和C++)实现 ...
- 大麦盒子（domybox）无法进入系统解决方案！【简单几步】
大麦无法进入系统解决方案![简单几步]前提准备:电脑一台盒子控制台软件盒子开机并联网并且盒子和电脑处于同一个路由器下的网络! 前提准备:电脑一台盒子控制台软件盒子开机并联网并且盒子和电脑处于同一个路由 ...