JavaScript melaksanakan pelarasan ketinggian automatik iframe dan merentas domain merentas domain antara kemahiran nama domain utama yang berbeza

JavaScript melaksanakan pelarasan ketinggian automatik iframe dan merentas domain merentas domain antara kemahiran nama domain utama yang berbeza_javascript

WBOY

Lepaskan： 2016-05-16 15:13:12

asal

1380 orang telah melayarinya

Semua orang tahu bahawa Js mempunyai dasar asal yang sama, yang bermaksud bahawa iframe bersarang dalam nama domain utama yang berbeza tidak membenarkan Js berkomunikasi.

Sebagai contoh, saya mempunyai tapak web dan saya ingin membenamkan halaman tapak webnya dalam tapak web. Kemudian saya boleh menggunakan iframe untuk merujuk alamat tapak web pihak ketiga.

Walau bagaimanapun, masalahnya ialah ketinggian iframe tetap dan tidak boleh disepadukan dengan baik dengan tapak web pihak ketiga Contohnya, tapak web pihak ketiga menggunakan pemalam aliran air terjun Untuk mengira ketinggian secara automatik semasa bergolek memuatkan, mari kita bercakap tentang merentas domain dahulu: Nama domain utama iframe mempunyai kaedah merentas domain yang berbeza Jika iframe diletakkan di tapak web A.com B.com A dan merujuk B.com, dalam kes ini, Js dalam B. .com tidak boleh mengakses A.com. JS merentas domain mesti mempunyai asal yang sama, iaitu nama domain utama yang sama, jadi apa yang perlu kita lakukan?

Kami boleh memperkenalkan iframe dalam B.com, mari kita panggil ia C buat masa ini. Dengan cara ini, jika sumber yang sama wujud, halaman web dalam iframe dalam B.com boleh berkomunikasi dengan A.com. Seterusnya, selagi B dan C berkomunikasi, biarkan C berkomunikasi dengan A untuk melengkapkan komunikasi B->A, supaya apabila ketinggian B berubah, C dimaklumkan, dan C memberitahu A untuk melaraskan ketinggian iframe.
Komunikasi antara B dan C sebenarnya boleh dicapai melalui alamat url B.com iframe ditetapkan kepada tersembunyi, dan C boleh menerimanya apabila alamat src ditukar.

Berhenti bercakap kosong dan teruskan dengan kod

A.com/index.html

<html>
  <script src="{$smarty.const.STATIC_URL}/js/jquery-1.7.1.min.js"></script>
  <script>
   var test = function() {
     $('#h1').html('test');
   }
   </script>
<body>
<h1 id="h1">nba.alltosun.net</h1>
<iframe id="ifm" width="760" height="100" src="http://***.sinaapp.com/"></iframe>
</body>
</html>

Salin selepas log masuk

B.com/index.html

<html>
<head></head>
<body>
  <h1>**.appsina.com</h1>
  <button id="button">设置高度</button>
  <div id="div" style="height:200px;display:none;"></div>
  <script src="http://nba.alltosun.net/js/jquery-1.7.1.min.js"></script>
  <script>
  $(function(){
    window.ifrH = function(e){
      var searchUrl = window.location.search;
      var b = null;
       
      var getParam = function(url, param) {
        var q = url.match(new RegExp( param + "=[^&]*")),
        n = "";
        if (q && q.length) {
          n = q[0].replace(param + "=", "");
        }
        return n;
      }
       
      var f = getParam(searchUrl,"url"),
        h = getParam(searchUrl, "ifmID"),
        k = getParam(searchUrl, "cbn"),
        g = getParam(searchUrl, "mh");
       
 
      var iframeId = 'testiframe';
      var iframe = document.getElementById(iframeId);
      var divId = 'alltosun';
       
      if (!iframe){
        var iframe = document.createElement('iframe');
        iframe.id = iframeId;
        iframe.style.display = "none";
        iframe.width = 0;
        iframe.height = 0;
        document.body.appendChild(iframe);
      }
       
      if (e && e.type == "onload" && h) {
        b.parentNode.removeChild(b);
        b = null;
      }
       
      if (!b) {
        b = document.createElement("div");
        b.id = divId;
        b.style.cssText = "clear:both;"
        document.body.appendChild(b);
      }
       
      var l = b.offsetTop + b.offsetHeight;
      iframe.src = (decodeURIComponent(f) || 
          "http://*****/test2") + "&h=" + l + "&ifmID=" + (h || "ifm") + "&cbn=test" + "&mh=" + g + "&t=" + ( (+ new Date()));
       
      if (e && e.type =="onload") {
        window.onload = null;
      }
    }
     
    window.onload = function() {
      ifrH({type: "onload"});
    }
     
    // ifrH();
    $('button').click(function(){
      $('div').show();
      ifrH();
    })
  })
  </script>
</body>
</html>

Salin selepas log masuk

Fail proksi C

<script>
var search = window.location.search,
getSearchParam = function (search, key) {
  var mc = search.match (new RegExp ( key + "=([^\&]*)") ),
    ret="";
  mc && mc.length && (ret = mc[0].replace( key + "=",""));
  return ret;
},
// 参数h 
h = getSearchParam(search,"h"),
ifmID = getSearchParam(search,"ifmID"),
cbn = getSearchParam(search,"cbn"),
// 宽高
mh = getSearchParam(search,"mh") || h,
isFunction = function(fn){
  return !!fn && !fn.nodeName && fn.constructor != String 
      && fn.constructor != RegExp && fn.constructor != Array 
      && (/function/i).test(fn + "");
};
 
try{
  if(parent && parent.parent){
    ifm = parent.parent.document.getElementById(ifmID);
    ifm && mh && (ifm.height=mh);
    fn=parent.parent[cbn];
    isFunction(fn) && fn.call();
    ifm=null;
  }
}catch(ex){
  console.log(ex);
}
 
</script>

Salin selepas log masuk