jQuery用iframe来解决跨域的简单示例(1)

前端之家收集整理的这篇文章主要介绍了jQuery用iframe来解决跨域的简单示例(1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。
跨域的解决方案有许多种,就不一一介绍了,在这里主要总结一下用iframe来解决跨域的方法

首先,说明一下window.name这个属性,我们要用这个属性来保存从服务器返回的数据。

window.name的值在同一浏览器窗口加载不同的页面后依然存在。(比如在同一浏览器窗口下,先访问页面a.html,将window.name设定为”Hello World”,然后再访问b.html,window.name仍然是”Hello World”。)
window.name最多可以支持2MB的值。
接下来结合代码来说明这个解决方案。为了实现跨域访问,当然要找到两个不同的域,最简单的,用http://localhost/和http://127.0.0.1/就可以了。新建一个client.html并假定其在http://localhost/这个域下面,用来向http://127.0.0.1/域下的页面server.html发送异步请求。

下面是发送请求的代码

/**
 * iframe来解决跨域
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
var iframe1 = document.createElement("iframe");
iframe1.src = "http://127.0.0.1/server.html";
(function() {
  // 当iframe加载完之后触发的函数
  function iframe1_load() {         
  }
  // 在IE下要用attachEvent来添加iframe的onload事件
  if(iframe1.attachEvent) {
    iframe1.attachEvent("onload",function(){ 
      iframe1_load(); 
    });
  }
  else {
    iframe1.onload = iframe1_load;
  }
})();
document.body.appendChild(iframe1);
注意这里的iframe1_load函数,它在iframe1完全加载完之后被浏览器调用,我们在这里取回从服务器返回的数据。上面说过,从服务器返回的数据应该是保存在window.name里的,改写一下iframe1_load:

/**
 * iframe来解决跨域
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
function iframe1_load() {
  alert(iframe1.contentWindow.name);
}
但由于同源策略的原因,上面的语句会报错,因为iframe1访问的页面在http://127.0.0.1/这个域,而这上面的JavaScript所在的页面是在http://localhost/,所以client.html暂时还不能访问iframe1的大部分属性。这个时候聪明的同学就能想到,如果把iframe1导航到http://localhost/下面的页面不就可以访问window.name了吗?而且上面也说过window.name在换了页面之后,还是存在的。

根据上面的分析,在http://localhost/下建一个新的页面empty.html(不用往里添加代码,只要保证不404就好。),在iframe1_load函数中先把iframe1导航到http://localhost/empty.html,然后再从iframe1的window.name里取数据。注意,iframe1导航到新页面之后浏览器会再次调用iframe1_load,从而造成死循环,所以还要加个标记

/**
 * iframe来解决跨域
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
var iframe1 = document.createElement("iframe");
iframe1.style.display = "none";
document.body.appendChild(iframe1);
(function () {
    var same_domain = false;
    // 当iframe加载完之后触发的函数
    function iframe1_load() {
        if (same_domain) {
            // 取得从服务器返回的数据
            alert(iframe1.contentWindow.name);
            // 关闭iframe1的窗口
            iframe1.contentWindow.close();
            // 移除iframe1
            document.body.removeChild(iframe1);
        } else {
            same_domain = true;
            // 不能用iframe1.src = "empty.html",在IE下有错误
            iframe1.contentWindow.location = "empty.html";
        }
    }
    // 在IE下要用attachEvent来添加iframe的onload处理函数
    if (iframe1.attachEvent) {
        iframe1.attachEvent("onload",function () {
            iframe1_load();
        });
    }
    else {
        iframe1.onload = iframe1_load;
    }
})();
iframe1.src = "http://127.0.0.1/server.html";
server.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>
  <title>Server</title>
  <script type="text/javascript">
    window.name = "HELLO WORLD";
  </script>
</head>
<body>
</body>
</html>
原文链接:https://www.f2er.com/jquery/527459.html

猜你在找的jQuery相关文章