如何在不同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,不知道有没有更好的办法？
所有回答(5)
0
因为A系统和B系统在不同的domain下，所以window.parent有权限限制而无法正常访问~
0
form提交应该是可以。
最直接的办法，可以读取数据库。如果实在传值麻烦的话。
谢谢，不过我主要想做的是通过url来传参数，请看问题补充部分
0
可以在地址栏传
A系统和B系统在不同的domain下，没办法更改父窗口的url
0
此时 A 和B1、B2在在浏览器里显示的是一个html,在 同一个父dom里，可以互相访问，用js进行操作。
B1的iframe可以访问父dom，再访问B2 dom。
对dom不是太了解，可以再稍微说明具体一点吗，非常感谢~
1
在，html5中可以，通过iframe的postMessage跨域传递参数和信息。
如下：
先是主页面HTML代码
- <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>
<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代码
- <form>
- <p>
- <label for="message">给父窗口发个信息：</label><input type="text" name="message" value="dad" id="message" />
- <input type="submit" />
- </p>
- </form>
- <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代码
- 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;
- }
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代码
- var parentwin = window.parent;
- window.onmessage=function(e){
- document.getElementById("test")。innerHTML = e.origin + "say:" + e.data;
- parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"*");
- };
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指代源域
