iframe的父子页面进行简单的相互传值,js父页面中使用子页面的方法

父页面parentPage.htm

您可能感兴趣的文章:

  • JS中Iframe之间传值及子页面与父页面应用
  • 在父页面调用子页面的JS方法
  • JS父页面与子页面相互传值方法
  • JSP父页面传参数到子页面及接收示例
  • iframe子页面与父页面在同域或不同域下的js通信
  • js子页面获取父页面数据示例
  • 两个JSP页面父页面获取子页面内容的两种方法
  • 嵌入式iframe子页面与父页面js通信的方法

iframe是非常常用的一个html元素,如果在父页面中使用子页面的方法应该怎么写呢,下面就做...

1.同域下iframe高度自适应的问题:

父页面是parentPage.html,子页面是childPage.html。

js父页面中使用子页面的方法,js页面使用方法

iframe是非常常用的一个html元素,如果在父页面中使用子页面的方法应该怎么写呢,下面就做一下简单的介绍。
一、父页面代码

<html>
<head>
<meta charset=" gb2312">
<title>父页面</title>
<script type="text/javascript">
function parentFunction() 
{
 alert('function in parent');
}
function callChild() 
{
 child.window.childFunction();
 /*
  child 为iframe的name属性值,
  不能为id,因为在FireFox下id不能获取iframe对象
 */
}
</script>
</head>
<body>
 <iframe name="child" src="./child.html" ></iframe>
</body>
</html>

二、iframe中的代码

<html>
<head>
<meta charset="gb2312">
<title>iframe代码</title>
<script type="text/javascript">
function childFunction() 
{
 alert('function in child');
}
function callParent() 
{
 parent.parentFunction();
}
</script>
</head>
<body>
</body>
</html>

上面两个代码可以在父页面和子页面对对方的函数进行相互调用,比较简单,不多介绍了。
希望本文所述对大家学习javascript程序设计有所帮助。

四、总结

当一个页面使用了iframe作为嵌套时,如何想要将父页面的数据传给iframe子页面,那iframe所指向的呢个子页面是怎么获取呢,又或者子页面的数据要给父页面使用,那么父页面又如何获取子页面的数据呢?下面根据这种情况作了一个简单的demo案例:

还是这两个页面 我想父页调用子页 如下方法:

//给父页面传数据var txt = '我是子界面主动传值给父界面的数值';parent.GetChildValue(txt); //GetValue是父界面的Js 方法
   New Document     function _getUrl {//&#36890;&#29992;&#26041;&#27861;&#65292;&#33719;&#21462;URL&#21442;&#25968; var query = location.href.split[1], value = decodeURIComponent(query.split[1].split; return value; }  { var callback = _getUrl, data = _getUrl; eval("window.top." + decodeURIComponent + "(" + decodeURIComponent;  
//获取子页面传入的数据 function GetChildValue(obj){ document.getElementById('texts').innerText = obj; }
   New Document      // &#36890;&#29992;&#26041;&#27861; ajax&#35831;&#27714; function _request  { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else { xmlhttp = new ActiveXObject; } xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) { var data = xmlhttp.responseText; callback; } } xmlhttp.open; xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8"); xmlhttp.send; } // &#36890;&#29992;&#26041;&#27861; &#33719;&#21462;url&#21442;&#25968; function _getQuery { var query = location.href.split[1], value = decodeURIComponent(query.split[1].split; return value; } //&#21521;process.php&#21457;&#36865;ajax&#35831;&#27714; function GetPerson { var url = 'http://b.com/demo/ajax/ajaxproxy/process.php'; var fn = function { var proxy = document.getElementById; proxy.src = "http://a.com/demo/ajax/ajaxproxy/Proxy.html&amp;#63;data=" + encodeURIComponent + "&amp;callback=" + encodeURIComponent; }; _request; } { var fn = _getQuery, reqdata = _getQuery, callback = _getQuery; eval(fn + "('" + reqdata +"', '" + callback + "')"); })();  

子页面:

id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}');?>

父页面:

abc.html代码如下:

!DOCTYPE htmlhtml head meta charset="UTF-8" title父页面/title style type="text/css" .box{ width: 600px; height: 400px; margin: 10px auto; } h3{ font-size: 16px; } .cont{ width: 100%; } .cont h4{ font-size: 14px; } .cont #texts{ width: 100%; line-height: 22px; font-size: 13px; color: #2E2D3C; } iframe{ /*只是隐藏,但任然保留DOM结构*/ visibility: hidden; } /style /head body div  h3这是父页面/h3 div  h4这是从子页面传入的数据:/h4 div /div iframe src="childPage.html" width="1px" height="1px" name="myIframe"/iframe /div /div script type="text/javascript" //获取子页面传入的数据 function GetChildValue(obj){ document.getElementById('texts').innerText = obj; } //给子页面传入数据 function toChildValue(){ var txt = '这是父页面给子页面的数据'; return txt; } /script /body/html
var b = function; }
//给子页面传入数据function toChildValue(){ var txt = '这是父页面给子页面的数据'; return txt;}

b不是个函数 但是我在子页面明明定义了这么一个函数,那么为什么会报这样的错误呢?经过仔细分析及google,发现有这么一个问题需要理解,当iframe没有加载完成后 我就去执行这个js会报这样的错误,所以就试着在火狐下 用iframe.onload这个函数 进行测试,果然没有报错,是正确的 所以就确定是这个问题。所以就想写个兼容IE和火狐 google写个函数 来确定iframe已经加载完成!,其实给个回调函数来调用我们上面的方法。

子页面childPage.html

def.html代码如下:

2、情况二:子页面获取父页面的数据(父页面给子页面传值)

如下图所示:域a.com的页面request.html(即

具体传值的数据根据自己的项目要求修改,下面放上两个页面的完整代码:

首先说明下,iframe通信 分为:同域通信 和 跨域通信。

子页面:

response.html代码如下:

//获取父页面传来的数据var getParentVule = window.parent.toChildValue();console.log(getParentVule)

比如: 的B.html页面,这两个页面数据进行通信,比如我想在父页面A.html 调用子页面当中的函数 我们很容易想到或者google下 document.getElementById.contentWindow.b();这种方法,其中b 是子页面B.html中的一个函数。但是这样调用下有个问题我纠结了很久,就是既然在火狐下报这样的错误, 如下:

1、情况一:父页面获取子页面传入的数据(子页面给父页面传值)

 var oldHeight = 0; t &amp;&amp; clearInterval; var t = setInterval{ var height = location.href.split[1]; if(height &amp;&amp; height != oldHeight) { oldHeight = height; if(window.parent.parent.getIfrData) { window.parent.parent.getIfrData; } } },200); 

父页面:

proxy.html

时间: 2019-08-12阅读: 147标签: iframe

document.domain = 'example.com';function child;}
!DOCTYPE htmlhtml head meta charset="UTF-8" title子页面/title style type="text/css" .box{ width: 600px; height: 400px; margin: 10px auto; } h3{ font-size: 16px; } /style /head body div  h3这是子页面/h3 /div script type="text/javascript" //给父页面传数据 var txt = '我是子界面主动传值给父界面的数值'; parent.GetChildValue(txt); //GetValue是父界面的Js 方法 //获取父页面传来的数据 var getParentVule = window.parent.toChildValue(); console.log(getParentVule) /script /body/html

综合上面的思路 就可以写个这样的代码:

这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的ajax请求,然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。

iframe1.html内容主要接受iframe3.html页面传过来的内容并且去完成相应的操作。iframe1.html代码如下:

iframe跨域访问一般分为2种情况,第一种是同主域,不同子域的跨域。 第二种是:不同主域跨域。

最后就是proxy.html代码:

1、 是同主域下面,不同子域之间的跨域;可以通过document.domain 来设置相同的主域来解决。

   New Document   *{margin:0;padding:0;}      var oldHeight = 0, ifr_el = document.getElementById; t &amp;&amp; clearInterval; var t = setInterval{ var height = document.body.scrollHeight; if { oldHeight = height; ifr_el.src += '#' +oldHeight; } },200);  

iframe3.html页面的唯一功能就是接收iframe2.html页面通过href传进来的值并且传递给iframe1.html页面,可到iframe2.html页面传来的值可以通过一个定时器不停去查看location.href是 否被改变,但是这样感觉效率很低,还有个方式就是在新的浏览器中通过onhashchange事件 (IE8+,Chrome5.0+,Firefox3.6+,Safari5.0+,Opera10.6+)来监听href的改变。

B.html 代码如下:

   New Document    这里将会填上响应的结果 点击,发送跨域请求   document.getElementById.onclick = function() { var url = 'http://b.com/demo/ajax/ajaxproxy/reponse.html', fn = 'GetPerson', //&#36825;&#26159;&#23450;&#20041;&#22312;response.html&#30340;&#26041;&#27861; reqdata = '{"id" : 24}', //&#36825;&#26159;&#35831;&#27714;&#30340;&#21442;&#25968; callback = "CallBack"; //&#36825;&#26159;&#35831;&#27714;&#20840;&#36807;&#31243;&#23436;&#25104;&#21518;&#25191;&#34892;&#30340;&#22238;&#35843;&#20989;&#25968;&#65292;&#25191;&#34892;&#26368;&#21518;&#30340;&#21160;&#20316; CrossRequest(url, fn, reqdata, callback); //&#21457;&#36865;&#35831;&#27714; } function CrossRequest(url,fn,reqdata,callback) { var server = document.getElementById; server.src = url + '&amp;#63;fn=' +encodeURIComponent + "&amp;data=" +encodeURIComponent + "&amp;callback="+encodeURIComponent; } //&#22238;&#35843;&#20989;&#25968; function CallBack { var str = "My name is " + data.name + ". I am a " + data.sex + ". I am " + data.age + " years old."; document.getElementById.innerHTML = str; }  

2. 跨域下iframe高度自适应的问题。

/* * 跨域 父页想调用子页的的函数 */document.domain = 'example.com';var iframe = document.getElementById;iframeIsLoad{ var obj = iframe.contentWindow; obj.child;function iframeIsLoad{ if { iframe.attachEvent{ callback && callback; }else { iframe.onload = function(){ callback && callback(); } } }
 topNddddddddddddddddame  function A; } var iframe = document.getElementById; iframeIsLoad{ var obj = document.getElementById.contentWindow; obj.b; function iframeIsLoad{ if { iframe.attachEvent{ callback &amp;&amp; callback; }else { iframe.onload = function(){ callback &amp;&amp; callback(); } } } 

这样就可以解决通过跨域实现iframe自适应高度的问题了。

一、 同域通信

三、iframe高度自适应的问题。

接下来看看php代码如下,其实就是想返回一个json数据:

下面贴上iframe1.html代码如下:

可以看到 默认情况下 iframe1.html 页面我给iframe2.html的高度是200像素 但是在iframe2.html我给iframe3.html高度是230像素,那么正常情况下是有滚动条的,那么现在我是想在iframe2.html获取滚动条的高度,把高度传给通过iframe3.html的src里面去,然后在iframe3.html页面里获取这个高度值 传给iframe1.html(因为iframe1.html和iframe3.html是同域的),所以iframe1.html能取到这个高度值,再设置下本身的高度就是这个值就ok了。

就可以动态设置iframe1页面的高度为iframe2的高度了。

所谓同域通信是指 下的a.html页面嵌套 iframe

子页面取父页面元素的值: window.parent.document.getElementById.innerHTML等方法。

假如我们demo有iframe1.html和iframe2.html

假如现在def.html页面有个child函数 代码如下:

2、 是不同主域跨域;

response.html

request.html

   New Document   *{margin:0;padding:0;}      window.onload = function() { var iframeid = document.getElementById; if(iframeid &amp;&amp; !window.opera) { if(iframeid.contentDocument &amp;&amp; iframeid.contentDocument.body.offsetHeight) { iframeid.height = iframeid.contentDocument.body.offsetHeight; }else if(iframeid.Document &amp;&amp; iframeid.Document.body.scrollHeight){ iframeid.height = iframeid.Document.body.scrollHeight; } } }  

就可以跨域调用了 不管是子页面调用父页面 还是父页面调用子页面。一切ok!

这个页面其实就是要告诉response.html:我要让你执行你定义好的方法GetPerson,并且要用我给你的参数'{"id" : 24}'。response.html纯粹是负责将CallBack这个方法名传递给下一位仁兄proxy.html,而proxy.html拿到了CallBack这个方法名就可以执行了,因为proxy.html和request.html是同域的。

process.php

iframe2.html内容是怎么把值传给iframe3.html页面,刚才说了是将值传递到iframe3.html页面的href中,所以只要修改iframe的src就可以,因为不用刷新C页面,所以可以用过hash的方式传递给iframe3.html页面.iframe2.html代码如下:

iframe2.html

a.html代码如下:

iframe高度自适应分为2种,一种是同域下自适应 另外一种是跨域下自适应,下面我们来看看同域下iframe高度自适应的问题。

思路:要实现a.com域下的request.html页面请求域b.com下的process.php,可以将请求参数通过url传给response.html,由response.html向process.php发起真正的ajax请求(response.html与process.php都属于域b.com),然后将返回的结果通过url传给proxy.html,最后由于proxy.html和request.html是在同个域下,所以可以在proxy.html利用window.top 将结果返回在request.html完成真正的跨域。

虽然google有几种方法关于不同主域上的跨域问题 有通过location.hash方法或者window.name方法或者html5及flash等等,但是我觉得下面iframe这种方法值得学习下,

iframe1中的内容:

二: iframe跨域通信。

以上就是本文的全部内容了,希望对大家的学习工作能有所帮助。如果有疑问可以留言讨论。

iframe3.html代码如下:

ok, 先看看页面结构

首先我们知道iframe跨域我们是不能用上面js方式来控制了,所以我们只能用个中间键 我们可以在a.com域下iframe1.html页面嵌套一个b.com域下的iframe2.html页面,然后我在iframe2.html页面嵌套个和iframe1.html相同域的iframe3.html页面了,这样的话 iframe1.html和iframe3.html就可以无障碍的进行通信了,因为页面iframe2.html嵌套iframe3.html,所以iframe2.html可以改写iframe3.html的href值。

先来看看request.html页面如下:

// 跨域 子页调用父页的 函数 document.domain = 'example.com';function test;};

这里也是最后一步了,proxy终于拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据,利用window.top执行request.html里定义的回调函数。

   New Document   *{margin:0;padding:0;}     
/* * 子页调用父页的方法 */document.domain = 'example.com';//window.top.test();window.parent.test();
  var ifr_el = document.getElementById; function getIfrData{ ifr_el.style.height = data+"px"; }

iframe2.html中的内容:

假如现在我有个域 abc.example.com 下有个页面叫abc.html, 页面上嵌套了一个iframe 如下:,我想在abc域下的页面abc.html 访问 def域下的def.html 我们都知道由于安全性 游览器的同源策略的限制,js不能操作页面不同域下 不同协议下 不同端口的页面,所以就要解决跨域访问了,假如父页面abc.html 页面有个js函数:function test;};我想在子页面调用这个函数 还是按照上面的同域方式调用 parent.test();这样,通过在火狐下看 已经跨域了 解决的办法是 在各个js函数顶部 加一句 document.domain = 'example.com',就可以解决了。

子页面调用父页面的函数很简单,只要这样搞下就ok了,window.parent.A();

思路:获取被嵌套iframe元素,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:iframe的父子页面进行简单的相互传值,js父页面中使用子页面的方法

相关阅读