JavaScript implémente l'ajustement automatique de la hauteur de l'iframe et l'inter-domaine entre les différents noms de domaine principaux

JavaScript implémente l'ajustement automatique de la hauteur de l'iframe et l'inter-domaine entre les différents noms de domaine principaux_javascript skills

WBOY

Libérer： 2016-05-16 15:13:12

original

1338 Les gens l'ont consulté

Tout le monde sait que Js a une politique de même origine, ce qui signifie que les iframes imbriquées dans différents noms de domaines principaux ne permettent pas à Js de communiquer.

Par exemple, j'ai un site Web et je souhaite intégrer ses pages dans le site Web. Ensuite, je peux utiliser iframe pour référencer l'adresse du site Web tiers.

Cependant, le problème est que la hauteur de l'iframe est fixe et ne peut pas être bien intégrée aux sites Web tiers. Par exemple, le site Web tiers utilise un plug-in de flux en cascade pour calculer automatiquement la hauteur pendant le déroulement. chargement, parlons d'abord du cross-domain : iframe principal Les noms de domaine ont des méthodes cross-domain différentes Si une iframe est placée dans le site A.com B.com A et fait référence à B.com, dans ce cas, les J dans B. .com ne peut pas accéder à A.com. Cross-domain JS doit avoir la même origine, c'est-à-dire le même nom de domaine principal, alors que devons-nous faire ?

Nous pouvons introduire une iframe dans B.com, appelons-la C pour l'instant. Cette iframe charge une page Web dans A.com. De cette façon, si la même source existe, la page Web dans l'iframe de B.com peut communiquer avec A.com. Ensuite, tant que B et C communiquent, laissez C communiquer avec A pour terminer la communication B-> A, de sorte que lorsque la hauteur de B change, C soit informé et C informe A d'ajuster la hauteur de l'iframe.
La communication entre B et C peut en fait être réalisée via l'adresse URL. L'iframe B.com est définie sur cachée et C peut la recevoir lorsque l'adresse src est modifiée.

Arrêtez de dire des bêtises et continuez avec le code

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>

Copier après la connexion

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>

Copier après la connexion

Fichier proxy 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>

Copier après la connexion