跨域

发布于 2015-09-14 / 前端 / 0条评论 / 2,114浏览

呵呵。不想备案,所以找了些有域名的地方内嵌iframe,然后地址栏不会变,作为obsession的我,感觉这样很不好,然后想把上面的地址栏改变。我首先就想到了hash…从此走向不归路…

关于跨域,我之前还是有些了解的,当时还只是知道jsonp能跨域…请原谅我当年的无知;后来阅览过jQuery源码和看了别的大神写的博文和之前接触的seajs之后,豁然开朗,原来就那么easy。。(居然输入法提示easyui…)

我在github上的静态站内嵌本wordpress。要实现 点击某篇博文,复制地址栏的地址能找到这篇文章

这样就需要跨域了,而且还是跨不同顶级域名,比夸跨同一域名不同二级域名复杂,因为同一顶级域名用cookie就能实现

废话就不多说了吧,上码

gh-pages (www.denghb.com)

(function(server){
  // 创建一个iframe
  var iframe = document.createElement('iframe');
  // 获取当前的hash
  var hash = window.location.hash;
  if(hash.length > 1){
    hash = hash.substr(1);
  }
  // url拼接
  iframe.src = server + hash;
  // 绑定onload事件(关键)
  iframe.onload = function(event){
    // 核心实现跨域访问
    var script = document.createElement('script');
    // 请求的服务器地址将会返回一个函数(showUrl('/xxx/xx');)
    script.src = server + '/access/get';
    document.body.appendChild(script);
    script.parentNode.removeChild(script);
  }
  iframe.style.cssText = 'position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;';
  document.body.appendChild(iframe);
})('http://wordpress.denghb.com');
// 显示url在地址栏
var showUrl = function(url){
  window.location.hash = url;
}

wordpress (MyServer|http://wordpress.denghb.com)

(function(server){
  var script = document.createElement('script');
  // 上传当前页面的 /xxx/xxx
  script.src = server + '/access/upload?url=' + window.location.pathname;
  document.body.appendChild(script);
  script.parentNode.removeChild(script);
})('http://wordpress.denghb.com');

这些就是前台代码;

了解了吗?

总结:将要显示的地址上传到服务器,再通过跨域的方式显示服务端存的地址;

服务端如何确认这个地址改显示在谁的浏览器?下篇分享

评论
站长统计