iframe父子页面之间相互调用元素和函数
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{padding:0;margin:0}
#box{width:450px;height:200px;border:2px solid red;margin:30px auto;}
#box iframe{width:100%;height:100%;}
</style>
</head>
<body> <div id="box">
<iframe src="children.html" id="iframebox" frameborder="0" scrolling="yes"></iframe>
</div>
<div id="pmsg"></div>
<div id="pmsg1"></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript"> /*
iframe中父子页面之间的数据传递
*/
//javascript版本
window.onload = function(){
//父页面调用子页面的元素和事件
//var iframebox = document.getElementById("iframebox"); //var cwinDom = iframebox.contentWindow;//获取的是window,而不是domcument对象
//cwinDom.document.getElementById("regbox").innerHTML = "皮皮,已经登录了。。。"; //需要在服务器中访问,否则会抛跨域异常 //var json = {msg:"皮皮,已经邮寄一份礼物给你了,注意查收"};
//cwinDom.getMsg(json);
} function msg(msg){
document.getElementById("pmsg1").innerHTML = msg;
} //jQuery版本
window.onload = function(){
var $frame = $("#iframebox").contents();
$frame.find("#regbox").html("皮皮,已经登录了。。。"); var json = {msg:"皮皮,已经邮寄一份礼物给你了,注意查收"};
$("#iframebox")[0].contentWindow.getMsg(json);
} </script> </body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body style="overflow:auto;">
<div id="regbox">登陆、注册</div> <div id="msg"></div> <script type="text/javascript"> function getMsg(params){
alert(99);
document.getElementById("msg").innerHTML = params.msg+'<br/>收到了,谢谢'; //调用父页面的元素和事件
parent.document.getElementById("pmsg").innerHTML = "礼物已收到了,谢谢";
parent.msg("调用了下父页面的事件"); //jQuery
$(parent.document).find("pmsg").html("礼物已收到了,谢谢");
} </script> </body>
</html>
iframe父子页面之间相互调用元素和函数的更多相关文章
- Iframe父页面与子页面之间的调用
原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下: Iframe:iframe元素是文档中的文档. window对象: 浏览器会在其打 ...
- Angular获取dom元素,以及父子组建之间相互传值
1.使用原生js代码获取dom元素 在ts文件中有一个ngOnInit()的方法,这个方式是指在模块加载完毕之后并不是dom加载完毕,也就是说如果你的dom元素中使用的angular的指令,然后想在这 ...
- Java-web-多个独立项目之间相互调用实践
本篇文章只涉及到应用层面,没有涉及到什么底层原理之类的,我目前的实力还没有达到那个级别.如果是大神级别的人看到这篇文章,请跳过. 项目框架也已经是搭建好了的,springboot版本为1.5,数据库操 ...
- synchronized修饰的方法之间相互调用
1:synchronized修饰的方法之间相互调用,执行结果为There hello ..因为两个方法(main,hello)的synchronized形成了互斥锁. 所以当main方法执行完之后 ...
- 父子页面之间元素相互操作(iframe子页面)
js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...
- js和vue方法的相互调用(iframe父子页面的方法相互调用)。
项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...
- iframe父子页面js之间的调用
父级页面:mian.html 子页面1:top.html 子页面2:index.html 页面关系 <div onclick="_top()">调用contentTop ...
- jQuery iframe之间相互调用
,子iframe内调用父类函数方法: window.parent.func(); ,子Iframe中获取父界面的元素: $("#xx", window.parent.documen ...
- iframe父子页面调用小结
子页面调用父页面 $('#Id', window.parent.document); //调用父页面元素 window.parent.func1(); //调用父页面方法 (子页面同理,需将js方 ...
随机推荐
- filter应用案例三:解决全站编码问题
1 说明 乱码问题: 获取请求参数中的乱码问题: POST请求:request.setCharacterEncoding("utf-8"): GET请求:new String(re ...
- Android常用控件之GridView与ExpandableListView的用法
概述 1.GridView:与ListView相比,可以显示多列,xml布局时其属性numColumns可以设置显示的列数. 2.ExpandableListView:与ListView相比,可以让每 ...
- light oj 1422 Halloween Costumes (区间dp)
题目链接:http://vjudge.net/contest/141291#problem/D 题意:有n个地方,每个地方要穿一种衣服,衣服可以嵌套穿,一旦脱下的衣服不能再穿,除非穿同样的一件新的,问 ...
- coffeeScript学习02
闭包 closure = do -> _private = "foo" -> _private console.log(closure()) #=> " ...
- BZOJ 3542 [Poi2014]Couriers ——可持久化线段树
[题目分析] 查找区间内出现次数大于一半的数字. 直接用主席树,线段树上维护区间大小,由于要求出现次数大于一半,每到一个节点可以分治下去. 时间复杂度(N+Q)logN [代码] #include & ...
- iOS开发-由浅至深学习block
关于block 在iOS 4.0之后,block横空出世,它本身封装了一段代码并将这段代码当做变量,通过block()的方式进行回调.这不免让我们想到在C函数中,我们可以定义一个指向函数的指针并且调用 ...
- http://www.cnblogs.com/summers/p/3225375.html
http://www.cnblogs.com/summers/p/3225375.html
- Django学习笔记之一
一.Windows下安装 Django 1.下载安装包解压后放到本地目录如C:\Django-1.7.2 官网地址:https://www.djangoproject.com/download/ 2. ...
- BOM和DOM的区别和关联
BOM 1. BOM是Browser Object Model的缩写,即浏览器对象模型. 2. BOM没有相关标准. 3. BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切. ...
- three.js入门2
新建一个html文件 <!DOCTYPE html> <html> <head> <title></title> <style> ...