微信客户端跨域分享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执行前执行。