首页 新闻 搜索 专区 学院

如何在不同iframe之间传值

0
悬赏园豆:30 [待解决问题]

现在有一个系统A(假设为service.cnblogs.com),iframe嵌入系统B(假设为search.cnblogs.com)的两个页面B1, B2,在B1做了一些操作之后,将一些值以参数的形式传给B2,请问如何做到?

系统A和系统B在不同的domain下。

问题补充:

再具体一点好了。

B系统提供两个页面:B1(iframe1)为searchbox,B2(iframe2)为显示searchresult。

在B1中输入关键字之后,将关键字传给B2,比如searchresult.aspx?keyword=xxx

因为在A中是分别用iframe引入,在B1中使用window.parent会因为domain不同被禁止访问,所以无法取到iframe2并设定src属性

 

现在已经找到一个方法,就是改A系统和B系统页面的domain,都改为window.domain='cnblogs.com',则在B1中可以使用parent.document.getElementById('iframe2').src=xxx

不过这样需要A系统改变domain,不知道有没有更好的办法?

Supper阿欣的主页 Supper阿欣 | 初学一级 | 园豆:172
提问于:2012-09-25 21:29
< >
分享
所有回答(5)
0
chenping2008 | 园豆:9836 (大侠五级) | 2012-09-25 21:55

因为A系统和B系统在不同的domain下,所以window.parent有权限限制而无法正常访问~

支持(0) 反对(0) Supper阿欣 | 园豆:172 (初学一级) | 2012-09-26 13:52
0

form提交应该是可以。

最直接的办法,可以读取数据库。如果实在传值麻烦的话。

二十三号同学 | 园豆:941 (小虾三级) | 2012-09-26 08:33

谢谢,不过我主要想做的是通过url来传参数,请看问题补充部分

支持(0) 反对(0) Supper阿欣 | 园豆:172 (初学一级) | 2012-09-26 13:53
0

可以在地址栏传

jason2013 | 园豆:1998 (小虾三级) | 2012-09-26 08:43

A系统和B系统在不同的domain下,没办法更改父窗口的url

支持(0) 反对(0) Supper阿欣 | 园豆:172 (初学一级) | 2012-09-26 13:53
0

此时 A 和B1、B2在在浏览器里显示的是一个html,在 同一个父dom里,可以互相访问,用js进行操作。

B1的iframe可以访问父dom,再访问B2 dom。

Qlin | 园豆:2403 (老鸟四级) | 2012-09-26 09:38

对dom不是太了解,可以再稍微说明具体一点吗,非常感谢~

支持(0) 反对(0) Supper阿欣 | 园豆:172 (初学一级) | 2012-09-26 13:54
1

  在,html5中可以,通过iframe的postMessage跨域传递参数和信息。

如下:

先是主页面HTML代码

 

  1. <section id="wrapper">  
  2.     <header><h1>postMessage (跨域)</h1></header>  
  3.     <article>  
  4.         <form>  
  5.             <p>  
  6.                 <label for="message">给iframe发一个信息:</label><input type="text" name="message" value="son" id="message" />  
  7.                 <input type="submit" />  
  8.             </p>  
  9.         </form>  
  10.         <h4>目标iframe传来的信息:</h4>  
  11.         <p id="test">暂无信息</p>  
  12.             <iframe id="iframe" src="xiebiji.com/works/postmessage/iframe.html"></iframe>  
  13.     </article>  
  14. </section>  
<section id="wrapper">
	<header><h1>postMessage (跨域)</h1></header>
	<article>
		<form>
			<p>
				<label for="message">给iframe发一个信息:</label><input type="text" name="message" value="son" id="message" />
				<input type="submit" />
			</p>
		</form>
		<h4>目标iframe传来的信息:</h4>
		<p id="test">暂无信息</p>
			<iframe id="iframe" src="xiebiji.com/works/postmessage/iframe.html"></iframe>
	</article>
</section>


然后是iframe的HTML代码

 

 

  1. <form>  
  2.     <p>  
  3.         <label for="message">给父窗口发个信息:</label><input type="text" name="message" value="dad" id="message" />  
  4.         <input type="submit" />  
  5.     </p>  
  6. </form>  
  7. <p id="test">暂无信息。</p>  
<form>
	<p>
		<label for="message">给父窗口发个信息:</label><input type="text" name="message" value="dad" id="message" />
		<input type="submit" />
	</p>
</form>
<p id="test">暂无信息。</p>


然后是主页面中的JS代码

 

 

  1. var win = document.getElementById("iframe").contentWindow;  
  2. document.querySelector('form').onsubmit=function(e){  
  3.     win.postMessage(document.getElementById("message").value,"*");  
  4.     if (e.preventDefault){  
  5.         e.preventDefault();  
  6.     }  
  7.     e.returnValue = false;  
  8. }  
var win = document.getElementById("iframe").contentWindow;
document.querySelector('form').onsubmit=function(e){
	win.postMessage(document.getElementById("message").value,"*");
    if (e.preventDefault){
		e.preventDefault();
	}
	e.returnValue = false;
}


关键代码就一句:win.postMessage(document.getElementById("message").value,"*");
postMessage是通信对象的一个方法,所以向iframe通信,就是iframe对象调用postMessage方法。postMessage有两个参数,缺一不可。第一个参数是要传递的数据,第二个参数是允许通信的域,“*”代表不对访问的域进行判断,可理解为允许所有域的通信。

 

然后是iframe中的JS代码

 

  1. var parentwin = window.parent;  
  2. window.onmessage=function(e){  
  3.     document.getElementById("test")。innerHTML = e.origin + "say:" + e.data;  
  4.     parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"*");  
  5. };  
var parentwin = window.parent;
window.onmessage=function(e){
	document.getElementById("test")。innerHTML = e.origin + "say:" + e.data;
	parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"*");
};

注:e.data包含传送过来的数据,e.origin指代源域 

马哲 | 园豆:202 (菜鸟二级) | 2013-01-08 11:25
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册