您的位置：首页 > Web前端 > JavaScript

js跨域请求数据实现

2011-03-23 14:50 477 查看

第一步，设置需要被跨域调用的页面kuayu.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>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title></title>

	<script type="text/javascript">
	window.name = "这里存放要被获取的跨域数据!";
	</script>
	</head>

	<body>
	</body>
	</html> 第二部在调用方加入如入js文件

/**

    * 跨域请求数据，使用iframe.contentWindow.name属性，

    * 本域名下还需要提供一个空白页面地址.

    *

    * 该方法获取数据是安全的，一旦从iframe.contentWindow.name获得数据，

    * 就立马删除iframe，防止数据泄露.

     *

    * 理论上讲iframe.contentWindow.name可以存储任意字节的数据.

    */

   function requestForCrossDomain(oParam) {

      var oFrame = document.createElement("iframe");

      oFrame.style.width    = "0px";

      oFrame.style.height   = "0px";

      oFrame.style.border   = "none";

      oFrame.style.overflow = "hidden";



      var isValid = 0;



      var handler = function() {

         if (!isValid) {

            isValid = 1;



            // 注意：这里使用location.href，不是this.src

            this.contentWindow.location.href = oParam.blankPage;

         }

         else {

            var rs = this.contentWindow.name;



            this.onload = null;

            this.onreadystatechange = null;

            this.parentNode.removeChild(this);



            oParam.callback(rs);

         }

      };



      oFrame.onload = handler;

      oFrame.onreadystatechange = function() {

         if (this.readyState === "complete") {

            handler.call(this);

         }

      };



      oFrame.src = oParam.url;



      document.body.appendChild(oFrame);

   };

第三步，在根目录中加入一个blank.htm页面，供跨域代码初始化时调用（只做为一个过度）

第四步，在具体的页面中去调用如下的js代码, 即可获取跨域数据

<script language="javascript">
requestForCrossDomain({
         url: "http://xxx.xxx.xxx/kuayu.htm?_=" + (new Date()).getTime(),
         blankPage: "blank.htm",
         callback: function(rs) {
            if (!rs) return;
                  alert(rs);
           });
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： function iframe xhtml javascript callback html

相关文章推荐

新的分享

章节导航