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 ...
随机推荐
- iOS9，10没有问题，iOS8上面一登录就崩溃，原因Assets的问题
在项目中开发中,打包成一个ipa的包,发现iOS9,10,运行非常流畅,iOS8上面一运行就崩溃,找了好久,才找到原因竟然是Assets的问题,一开始我把ipa包放在蒲公英上面托管扫码下载的,用iTu ...
- 【Egret】2D 使用中的一些疑难解决技巧！
1.问题:声音在ios上无法播放 解决方法:①首先需要预加载一个声音 ②然后目前只有点击之后才能播放声音,不能默认播放 2.问题:滚动条问题 解 ...
- Ubuntu14.04配置Apache支持多个站点
怎样在一个Ubuntu的机器上(虚拟机)配置Apache支持多个网站呢? 比如你有一台独立的Ubuntu虚拟机,配有一个外网的IP(45.46.47.48),并且注册了两个域名AAA.com和BBB. ...
- Linux之环境变量
1. 变量的显示与设置 显示变量 echo \(PATH</font></code><br/> 取消变量 <code><font color=&q ...
- WPF 中使slide控件拖动完成后改变变量值
这个问题一开始觉得还是挺简单的,网上也看到不少解决方案. 首先一个最简单最直接的方案就是自定义一个名为FinalValue的依赖属性.随后重载OnThumbDragCompleted函数,在Thumb ...
- JavaWeb总结(五)—Cookie
一.会话 1.提出问题 HTTP协议是一种无状态的协议.Web服务器本身不能识别哪些请求是同一浏览器发出的,浏览器的每一次请求都是孤立的.即使HTTP1.1支持持续连接,但当用户有一段时间没有提交请求 ...
- ConcurrentHashMap总结
线程不安全的HashMap 因为多线程环境下,使用HashMap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap,如以下代码 final HashM ...
- 如何在 FineUIMvc 中引用第三方 JavaScript 库
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 引入第三方颜色选择器 在 FineUIMvc 中使用第三方 JavaScript 遵循一定的约定,也非常简单. 下面以官网示例为 ...
- Sql日期时间格式转换大全
简介:我们经常会用到sql日期转换,这里列出了日期输出为字符串的所有代码 输出格式 2014-06-12 ), ) 输出格式 2014-06-12 22:31:18 ), ) 以下是各种转换日期代码号 ...
- How to trace the Geolocation of network traffic
A case about suspicious malware App. A forensic examiner capatured some pcap files and he'd to know ...