Rumah >hujung hadapan web >tutorial js >JavaScript melaksanakan pelarasan ketinggian automatik iframe dan merentas domain merentas domain antara kemahiran nama domain utama yang berbeza_javascript

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

WBOYasal: 2016-05-16 15:13:121380semak imbas

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>

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>

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>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Idea untuk melaksanakan Permainan Tuan Tanah dengan kemahiran JavaScript_javascriptArtikel seterusnya：Idea untuk melaksanakan Permainan Tuan Tanah dengan kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi