跨域-使用Proxy page或Cross Frame

Posted on 2011-11-12 22:11 宽田阅读(1405) 评论(0) 编辑收藏举报

文章目录：

跨域-知识

跨域-使用JSONP

跨域-使用js文件

跨域-使用window.name

跨域-使用Proxy page或Cross Frame

原理请看“跨域-知识”Cross Frame节。主要是在B域中在放一个iframe，这iframe在指向A域中页面，通过此页面进行传值。

A域中Page.aspx

B域中B.aspx

A域中proxy.aspx.此iframe为隐藏的

实现方法如下。

1、A域(a.com)中建立两个页面。

CrossByProxyPage.aspx，主页面，放入一个iframe，用于调用B域中页面。

CrossProxy.aspx，代码理页，用于传值。

CrossByProxyPage.aspx代码如下。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CrossByProxyPage.aspx.cs"
    Inherits="IframeTest.CrossByProxyPage" %>

<!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 runat="server">
    <title></title>
    <script type="text/javascript">
        //代理页面通过此方法显示信息
        function ShowParameter(parameterString) {
            if (parameterString.length > 0) {
                alert("TopParent Show: " + parameterString);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    Parent Page Call Child Page
    <div>
        <iframe id="ifr" src="http://B.com/CrossByProxyPage.aspx" width="100%"
            height="500px"></iframe>
    </div>
    </form>
</body>
</html>

CrossProxy.aspx页面代码如下。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CrossProxy.aspx.cs" Inherits="IframeTest.CrossProxy" %>

<!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 runat="server">
    <title></title>
    <script type="text/javascript">
        //得到通过Url传过来的值
        var praIndex = location.href.indexOf("?");
        var parameterString = praIndex > 0 ? location.href.substring(praIndex + 1, location.href.length) : "";
        var topParent = parent.parent;
        //调用主页面js方法显示信息
        var topParentfunc = parent.parent.ShowParameter;
        if (topParentfunc) {
            topParentfunc(parameterString);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      This is Proxy Page!
    </div>
    </form>
</body>
</html>

2、B域(b.com)中的被调用页面CrossByProxyPage.aspx。此页中放入一个iframe，用于调用A域中的代理页面。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CrossByProxyPage.aspx.cs"
    Inherits="ExtNetStudy.CrossByProxyPage" %>

<!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 runat="server">
    <title></title>
    <script type="text/javascript">
        var SetParameterClick = function () {
            var iframeObj = document.getElementById("iframProxy");
            if (iframeObj) {
                //通过URL传递参数，你也可以使用hash(#)传送参数
                var iframeSrc = iframeObj.src + "?pra=" + document.getElementById("ibnParameter").value;
                alert("child Url: " + iframeSrc);
                iframeObj.src = iframeSrc;
            }
            else {
                alert("Get Proxy page Faile");
            }

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    Child page Call Proxy page
    <div>
        <iframe id="iframProxy" src="http://A.com/CrossProxy.aspx" width="100%"
            height="100px"></iframe>
    </div>
    <%--设置要传递的参数--%>
    <input id="ibnParameter" type="text" value="TestParameter" />
    <input id="btnSetParameter" type="button" value="Set Paraameter" onclick="SetParameterClick()" />
    </form>
</body>
</html>

说明：

此种方法也可以变通一下，如果B.com页面不需要长时间显示，可以直接可以B.com页跳转到A.com中的页面。如下代码。

Response.Redirect("http://A.com/CrossProxy.aspx?id=001&data=1111");