微信客戶端跨域分享iframe內的內容

1、首先要保證有這兩個網站的修改權限

2、應用場景：A站可以通過微信直接分享，B站沒有申請相關權限，B站作爲iframe源，我們通過A站去分享B站的內容

3、在A站iframe所在頁面加入以下腳本，並且引用jquery.base64

var title=null;
   $.base64.utf8encode = true;
   if(getQueryString("data")){
       document.title=JSON.parse($.base64.atob((getQueryString("data")), true)).title;
   }
  function isWeiXin() {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          return true;
      } else {
          return false;
      }
  }
  function getQueryString(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
          return unescape(r[2]);
      }
      return null;
  }

window.onload=function(){
    //postmessage(參數,子頁面域名)
    document.querySelector("#myiframe").contentWindow.postMessage('getData','http://rainbow6s.org');
};

window.addEventListener('message',function(e){
    var data=JSON.parse(e.data);
    if(!isWeiXin()){ return ; }
    if($("#myiframe").attr("src")!=data.url)
    location=location.href.substr(0,location.href.indexOf("?"))+"?data="+$.base64.btoa(JSON.stringify({"url":data.url,"title":data.title}));
},false);

$(function () {
      if(getQueryString("data")){
          $("#myiframe").attr("src",JSON.parse($.base64.atob((getQueryString("data")), true)).url);
}else {
          $("#myiframe").attr("src",url);
}
  });

 

其中“myiframe”爲iframe的ID。 

B站所有頁面加入以下腳本

window.addEventListener('message',function(e){
    if(e.source!=window.parent) return;
    window.parent.postMessage(JSON.stringify({"url":window.location.href,"title":document.title}),'*');
},false);
$(function () {
    window.parent.postMessage(JSON.stringify({"url":window.location.href,"title":document.title}),'*');
});

 

4、思路解釋：

建立A與B的通信後，只要B跳轉到其他頁面（或者說：只要B站當前HTML文檔加載完畢），就會通過JSON給A發送它目前的地址以及文檔標題，A站在接收到信息後，會判斷iframe的src和傳來的url是否相同，如果相同則說明不需要進行處理，不相同，則將傳來的src作爲參數傳遞給當前頁面（這些參數需要使用base64進行處理否則會亂碼），並重新加載當前頁面。當前頁面在加載後會判斷當前頁面的url裏是否有參數，如果有參數則解密參數，並將參數中的url賦給iframe的src，其中的title賦值給當前頁面。需要注意的是最後的操作要在微信JSSDK執行前執行。