suchen

Heim >Web-Frontend >js-Tutorial >JavaScript implementiert die automatische Höhenanpassung von Iframes und die domänenübergreifende domänenübergreifende Kommunikation zwischen verschiedenen Hauptdomänennamen_Javascript-Fähigkeiten

JavaScript implementiert die automatische Höhenanpassung von Iframes und die domänenübergreifende domänenübergreifende Kommunikation zwischen verschiedenen Hauptdomänennamen_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:13:121375Durchsuche

Jeder weiß, dass Js eine Same-Origin-Richtlinie hat, was bedeutet, dass in verschiedenen Hauptdomänennamen verschachtelte Iframes die Kommunikation von Js nicht zulassen.

Zum Beispiel habe ich eine Website und möchte deren Seiten in die Website einbetten. Dann kann ich iframe verwenden, um auf die Adresse der Website eines Drittanbieters zu verweisen.

Das Problem besteht jedoch darin, dass die Höhe des Iframes nicht gut in Websites von Drittanbietern integriert werden kann. Beispielsweise verwendet die Website von Drittanbietern ein Wasserfall-Flow-Plugin, um die Höhe beim Rollen automatisch zu berechnen Beim Laden sprechen wir zunächst über domänenübergreifendes Arbeiten: Iframe-Hauptdomänennamen haben unterschiedliche domänenübergreifende Methoden. Wenn ein Iframe auf der Website A.com B.com A platziert ist und auf B.com verweist, sind es in diesem Fall die Js in B .com kann nicht auf A.com zugreifen. Domänenübergreifendes JS muss denselben Ursprung haben, dh denselben Hauptdomänennamen. Was sollen wir also tun?

Wir können einen Iframe in B.com einführen, nennen wir ihn vorerst C. Dieser Iframe lädt eine Webseite in A.com. Auf diese Weise kann die Webseite im Iframe in B.com mit A.com kommunizieren, wenn dieselbe Quelle vorhanden ist. Lassen Sie als Nächstes, solange B und C kommunizieren, C mit A kommunizieren, um die B->A-Kommunikation abzuschließen, sodass C benachrichtigt wird, wenn sich die Höhe von B ändert, und C A benachrichtigt, um die Iframe-Höhe anzupassen.
Die Kommunikation zwischen B und C kann tatsächlich über die URL-Adresse erreicht werden. Der B.com-Iframe ist auf ausgeblendet eingestellt und C kann ihn empfangen, wenn die Quelladresse geändert wird.

Hören Sie auf, Unsinn zu reden, und machen Sie weiter mit dem 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>


C-Proxy-Datei

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ideen zur Umsetzung des Landlord Game mit JavaScript_Javascript-KenntnissenNächster Artikel：Ideen zur Umsetzung des Landlord Game mit JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen