前端跨域访问和传值

浏览数：23 / 时间：2015年06月09日

由于浏览器对跨域做了访问限制，所以无法访问跨域iframe下的document，尝试访问则会报“拒绝访问”等(不同浏览器提示不一样)

这里介绍一种跨域执行页面脚本的方法

1.域A下domA.html中 iframe加载域B下domB.html，并执行domB_Action方法。

2.domB.html页面上div[id=’bt’]调用domA_Action方法。

这样就实现了跨域交互，就是如果需要调用很多跨域方法，可以通过传方法名参数然后执行对应方法(未测试)

代码如下：

domA.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<title>域A</title>
<style>
#titleA{
    height:50px;
    background:yellow;
    font-size:20px;
    line-height:50px;
    text-align:center;
}

#frameA{
    height:500px;
    width:100%;
    margin:auto;
    border:1px solid red;
}
</style>
</head>
<body>

<div id="titleA">
</div>
<iframe src="http://192.168.3.232:8007/domB.html" width="100%" frameborder="0" id="frameA" name="frameA" scrolling="no"></iframe>
<iframe id="removeTarget" src="" style="display:none"></iframe>

<script type="text/javascript">
    $(function(){
        $("#frameA").load(function(){
            //通过hash在页面之间传值
            $("#removeTarget").attr("src",‘http://192.168.3.232:8007/domB_Action.html?‘ + Math.random()+"#form_domA");
        });
    });
    
    
    function domA_Action(param){
        $("#titleA").html("DomA_Action 被执行了！\n 参数为："+param);
    }
</script>

</body>
</html>

domA_Action.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
 </head>
 <body>
     <script type="text/javascript">
        //接收参数
        var hash_url = window.location.hash;  
        var parm= hash_url.split("#")[1];     
        
        //注意层次
        parent.parent.window.domA_Action(parm);
    </script>
 </body>
</html>

domB.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<title>域B</title>
<style>
*{
    padding:0;
    margin:0;
}
body{
    height:500px;
}

#titleB{
    height:50px;
    background:gray;
    font-size:20px;
    line-height:50px;
    text-align:center;
}

#bt{
    height:50px;
    width:200px;
    font-size:20px;
    line-height:50px;
    text-align:center;
    cursor:pointer;
    margin:auto;
    background:burlywood;
}
</style>
</head>
<body>

<div id="titleB">
</div>

<div id="bt">调用DomA_Action</div>
<script>
    function domB_Action(param){
        $("#titleB").html("DomB_Action 被执行了！\n 参数为："+param);
    };
    
    $(function(){
        $("#bt").click(function(){
            if($("#tempIframe").length<1)
                $("<iframe id=‘tempIframe‘></iframe>").appendTo("body").hide();
            $("#tempIframe").attr("src","http://127.0.0.1/test/domA_Action.html?" + Math.random() + "#from_domB");
        })
    });
</script>
</body>
</html>

domB_Action.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
 </head>
 <body>
     <script type="text/javascript"> 
        var hash_url = window.location.hash;  
        var parm= hash_url.split("#")[1]; 
        parent.window.frameA.domB_Action(parm);    
    </script>
 </body>
</html>