recherche

Maison  >  Article  >  interface Web  >  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

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
WBOYoriginal
2016-05-16 15:13:121339parcourir

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>


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>


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>

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Idées pour implémenter le Landlord Game avec des compétences JavaScript_javascriptArticle suivant：Idées pour implémenter le Landlord Game avec des compétences JavaScript_javascript

Articles Liés

Voir plus