js跨域弹窗传值

最新推荐文章于 2022-01-22 13:19:32 发布

原创最新推荐文章于 2022-01-22 13:19:32 发布 · 7.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #iframe #html #function #input #button

学习笔记专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何解决在www.b.com网站的B.htm页面中嵌入www.a.com网站的A.htm页面，并从弹出的AA.htm页面跨域获取值的问题。通过创建一个不可见的iframe，其src指向B网站的BB.htm页面，该页面负责弹出AA.htm并传递值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近搞一个需求有关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页面内容

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
   
   
<html xmlns="http://www.w3.org/1999/xhtml"> 
   
<head> 
   
    <title></title> 
   
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>   1:  
    <script type="text/javascript">
        function Show() {
            $("#ifShow").remove();
            $("body").append("<iframe id='ifShow' src='http://www.b.com/BB.htm' style='display:none'></iframe>");
        }
        function SetValue(v) {
            $("input[id='txtValue']").val(v);
        }
    
   </script> 
   
</head> 
   
<body> 
   
    <input id="btnShow" type="button" value="弹窗" onclick="Show();" /> 
   
    <input id="txtValue" type="text" disabled="disabled" /> 
   
</body> 
   
</html> 
  
 

A网站AA.htm页面内容

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
   
   
<html xmlns="http://www.w3.org/1999/xhtml"> 
   
<head> 
   
    <title></title> 
   
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>   1:  
    <script type="text/javascript">
        function SetValue() {
            var v = $("input[id='txtValue']").val();
            $("#ifSet").remove();
            $("body").append("<iframe id='ifSet' src='http://www.b.com/BB.htm#" + v + "' style='display:none'></iframe>");            
        }
        $(document).ready(function () {
            if (location.hash != "") {
                parent.parent.frames["Myiframe"].SetValue(location.hash.substr(1));
            } 
        });
    
   </script> 
   
</head> 
   
<body> 
   
    <input id="btnSetValue" type="button" value="确定" onclick="SetValue();return false;" /> 
   
    <input id="txtValue" type="text" /> 
   
</body> 
   
</html> 
  
 

B网站B.htm页面内容

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
   
   
<html xmlns="http://www.w3.org/1999/xhtml"> 
   
<head> 
   
    <title></title> 
   
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
   
</head> 
   
<body> 
   
    <iframe id="Myiframe" src="http://www.a.com/A.htm" height="50px" width="250px"></iframe> 
   
</body> 
   
</html>

B网站BB.htm页面内容(作为跨域的中间代理)

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
   
   
<html xmlns="http://www.w3.org/1999/xhtml"> 
   
<head> 
   
    <title></title> 
   
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>   1:  
    <script type="text/javascript">
        $(document).ready(function () {
            if (location.hash != "") {
                parent.parent.$("#ifbSet").remove();
                parent.parent.$("body").append("<iframe id='ifbSet' src='http://www.a.com/AA.htm#" + location.hash.substr(1) + "' style='display:none'></iframe>");
                parent.parent.$("#ifbGet").remove();
            } else {
                parent.parent.$("#ifbGet").remove();
                parent.parent.$("body").append("<iframe id='ifbGet' src='http://www.a.com/AA.htm' height='50px' width='250ox'></iframe>")
            }
        });
    
   </script> 
   
</head> 
   
<body> 
   
   
   
</body> 
   
</html> 
  
 