简言之

呵呵。不想备案，所以找了些有域名的地方内嵌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 &gt; 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');

这些就是前台代码；

了解了吗？

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

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

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名，转载请标明出处；