最近搞一个需求有关js跨域弹窗传值，问题是这样的:有两个网站分别为www.b.com、www.a.com 在B网站B.htm嵌入A网站的A.htm页面，在A.htm页面要从弹出的AA.htm页面获取一个值（产生跨域问题，AA.htm页面要弹出到B网站）。解决方法是创建一个不可见iframe，他的src为对方网站一个页面（BB.htm)，在这个页面做弹出AA.htm页面），传值也依法泡制。代码如下（已下代码只作demo，神马弹出效果的无，代码写得也N丑^_^）：
A网站A.htm页面内容
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2: 3: <html xmlns="http://www.w3.org/1999/xhtml"> 4: <head> 5: <title></title> 6: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 1: 2: <script type="text/javascript"> 3: function Show() { 4: $("#ifShow").remove(); 5: $("body").append("<iframe id='ifShow' src='http://www.b.com/BB.htm' style='display:none'></iframe>"); 6: } 7: function SetValue(v) { 8: $("input[id='txtValue']").val(v); 9: } 10: </script> 7: </head> 8: <body> 9: <input id="btnShow" type="button" value="弹窗" onclick="Show();" /> 10: <input id="txtValue" type="text" disabled="disabled" /> 11: </body> 12: </html>A网站AA.htm页面内容
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2: 3: <html xmlns="http://www.w3.org/1999/xhtml"> 4: <head> 5: <title></title> 6: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 1: 2: <script type="text/javascript"> 3: function SetValue() { 4: var v = $("input[id='txtValue']").val(); 5: $("#ifSet").remove(); 6: $("body").append("<iframe id='ifSet' src='http://www.b.com/BB.htm#" + v + "' style='display:none'></iframe>"); 7: } 8: $(document).ready(function () { 9: if (location.hash != "") { 10: parent.parent.frames["Myiframe"].SetValue(location.hash.substr(1)); 11: } 12: }); 13: </script> 7: </head> 8: <body> 9: <input id="btnSetValue" type="button" value="确定" onclick="SetValue();return false;" /> 10: <input id="txtValue" type="text" /> 11: </body> 12: </html>B网站B.htm页面内容
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2: 3: <html xmlns="http://www.w3.org/1999/xhtml"> 4: <head> 5: <title></title> 6: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 7: </head> 8: <body> 9: <iframe id="Myiframe" src="http://www.a.com/A.htm" height="50px" width="250px"></iframe> 10: </body> 11: </html>B网站BB.htm页面内容(作为跨域的中间代理)
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2: 3: <html xmlns="http://www.w3.org/1999/xhtml"> 4: <head> 5: <title></title> 6: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 1: 2: <script type="text/javascript"> 3: $(document).ready(function () { 4: if (location.hash != "") { 5: parent.parent.$("#ifbSet").remove(); 6: parent.parent.$("body").append("<iframe id='ifbSet' src='http://www.a.com/AA.htm#" + location.hash.substr(1) + "' style='display:none'></iframe>"); 7: parent.parent.$("#ifbGet").remove(); 8: } else { 9: parent.parent.$("#ifbGet").remove(); 10: parent.parent.$("body").append("<iframe id='ifbGet' src='http://www.a.com/AA.htm' height='50px' width='250ox'></iframe>") 11: } 12: }); 13: </script> 7: </head> 8: <body> 9: 10: </body> 11: </html>