Mehrere domänenübergreifende Methoden in Javascript

In clientseitigen Programmiersprachen wie JavaScript schreibt die Same-Origin-Richtlinie vor, dass domänenübergreifende Skripte in einer Domäne nicht auf die meisten Eigenschaften und Methoden einer anderen Domäne zugreifen und diese ausführen können. Nur wenn zwei Domänen dasselbe Protokoll, denselben Host und denselben Port haben, betrachten wir sie als dieselbe Domäne. In der tatsächlichen Entwicklung müssen wir jedoch häufig Ressourcen aus anderen Domänen abrufen. Zu diesem Zeitpunkt kommen verschiedene domänenübergreifende Ressourcenmethoden ins Spiel. Heute werden wir hauptsächlich einige domänenübergreifende Methoden zusammenfassen, die häufig bei der Arbeit verwendet werden.

1.window.name

Das Namensattribut des Fensterobjekts ist ein ganz besonderes Attribut. Wenn eine neue Seite in den Frame geladen wird, bleibt der Namensattributwert unverändert. Dann können wir iframe auf Seite A verwenden, um Seite B anderer Domänen zu laden, und JavaScript auf Seite B verwenden, um die an window.name zu übergebenden Daten zuzuweisen. Nachdem der iframe geladen wurde, kann der Namensattributwert für den Zugriff abgerufen werden. Vom Webdienst gesendete Informationen. Das Namensattribut ist jedoch nur für Frames mit demselben Domänennamen zugänglich. Das bedeutet, dass für den Zugriff auf das Namensattribut beim Laden der Remote-Webdienstseite der Frame zurück zur ursprünglichen Domäne navigiert werden muss. Das heißt, Seite A ändert die Adresse des Iframes und ändert sie in eine Adresse in derselben Domäne. Anschließend kann der Wert von window.name gelesen werden. Sobald die Namenseigenschaft erhalten wurde, zerstören Sie den Rahmen. Diese Methode eignet sich sehr gut für einseitige Datenanforderungen und das Protokoll ist einfach und sicher.

Der Code für Seite B (www.jesse.com/data.html) lautet wie folgt:

<script type="text/javascript">
window.name = 'I was there!';
// 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
// 数据格式可以自定义，如json、字符串
</script>

Seite A ( www.jack.com/index.html) Der Code lautet wie folgt:

<script type="text/javascript">
var state = 0,
  iframe = document.createElement('iframe'),
  loadfn = function() {
    if (state === 1) {
      var data = iframe.contentWindow.name; // 读取数据
      console.log(data); //弹出'I wasthere!'
      (function(){
        //获取数据以后销毁这个iframe。
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
      })();
    } else if (state === 0) {
      state = 1;
      // 设置的代理页面使其回原始域
      iframe.contentWindow.location = "http://www.jack.com/proxy.html"; 
    }
  };
iframe.src = 'http://www.jesse.com/data.html';
if (iframe.attachEvent) {
  iframe.attachEvent('onload', loadfn);
} else {
  iframe.onload = loadfn;
}
document.body.appendChild(iframe);
</script>

2. Mit dem src-Tag

Der Browser verbietet standardmäßig den domänenübergreifenden Zugriff, es ist jedoch nicht verboten, das src-Attribut des Tags auf der Seite zu verwenden, um auf Dateien in anderen Domänen zu verweisen. Auf dieser Grundlage können Sie problemlos eine vollständige domänenübergreifende Kommunikation erreichen, indem Sie Knotenmethoden mit src-Attributen erstellen. Zu den domänenübergreifenden Methoden, die dieses Prinzip nutzen, gehören die folgenden:

Dynamische Erstellung von Skripten

Wenn ich beispielsweise die Daten der Domäne B von der Seite pageA der Domäne A laden möchte, dann Auf der Seite pageB der Domäne B deklariere ich in diesem Beispiel die von pageA benötigten Daten in Form von JavaScript und lade dann pageB mithilfe des Skript-Tags in pageA, dann wird das Skript in pageB ausgeführt. Der Code von

pageA(www.jack.com/index.html) lautet wie folgt:

function getData(data){
  //这里是对获取的数据的相关操作
  console.log(data);
  //数据获取到后移除创建的script标签
  document.body.removeChild(originData);
}
var originData = document.createElement('script');
originData.src = 'http://www.jesse.com/data.js';
originData.setAttribute("type", "text/javascript");
document.body.appendChild(originData);

pageB(www.jesse. com/ data.js)-Code lautet wie folgt:

getData('这里是远程跨域获取的数据');//数据格式可以自定义，如json、字符串

jsonp

Bei Verwendung von $.ajax() zum Abrufen von Remote-Daten , wenn es sich um domänenübergreifende Ressourcen handelt, kann die JSONP-Methode verwendet werden. Früher dachte ich, JSONP sei eine Art Ajax, aber später wurde mir klar, dass sie überhaupt nicht dasselbe waren. Ajax fordert Daten im XHR-Modus an, während JSONP Daten im Skriptmodus anfordert. Dies ist dasselbe wie die oben beschriebene Methode zur dynamischen Skripterstellung. Der Code von

pageA(www.jack.com/index.html) lautet wie folgt:

$.ajax({
  //JSONP不支持POST方式
  type:"GET",
  url:"http://www.jesse.com/data.php",
  dataType:"jsonp",
  //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
  jsonpCallback:"getData",
  success: function(data){
    console.log(data);
  },
  error: function(){
    console.log('fail');
  }
})

pageB(www .jesse .com/data.js) Der Code lautet wie folgt:

<?php
  $callback = $_GET[&#39;callback&#39;];//得到回调函数名,这里是getData
  $data = array(&#39;a&#39;,&#39;b&#39;,&#39;c&#39;);//要返回的数据
  echo $callback.&#39;(&#39;.json_encode($data).&#39;)&#39;;//输出
?>

3.document.domain

ist derselbe für die Hauptdomäne, aber unterschiedlich für die Unterdomäne. Das Beispiel kann durch die Einstellung document.domain gelöst werden. Die spezifische Methode besteht darin, document.domain = „a.com“ zu den beiden Dateien http://www.php.cn/ bzw. http://www.php.cn/ hinzuzufügen und dann die Datei a.html zu übergeben Erstellen Sie einen Iframe, um das Inhaltsdokument des Iframes zu steuern, damit die beiden JS-Dateien „interagieren“ können. Natürlich kann diese Methode nur die Situation lösen, in der die primäre Domäne dieselbe ist, der sekundäre Domänenname jedoch unterschiedlich ist

a.html auf www.a.com

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
  var doc = ifr.contentDocument || ifr.contentWindow.document;
  // 在这里操纵b.html
  alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

b.html auf script.a.com

document.domain = 'a.com';

4 (CORS)

Prinzip: Cross-Origin Resource Sharing (CORS) definiert einen domänenübergreifenden Zugriffsmechanismus, der es AJAX ermöglicht, domänenübergreifenden Zugriff zu erreichen. CORS ermöglicht einer Webanwendung in einer Domäne, domänenübergreifende AJAX-Anfragen an eine andere Domäne zu senden. Die Implementierung dieser Funktionalität ist so einfach wie das Senden eines Antwortheaders durch den Server. Es gewährleistet die Anforderungssicherheit durch die gemeinsame Erklärung von Client und Server. Der Server fügt dem HTTP-Anforderungsheader eine Reihe von HTTP-Anforderungsparametern (z. B. Access-Control-Allow-Origin usw.) hinzu, um einzuschränken, welche Domänenanforderungen und welche Anforderungstypen akzeptiert werden können, und der Client muss seinen eigenen Zeitpunkt angeben Initiieren einer Anfrage. Andernfalls wird der Server diese nicht verarbeiten. Wenn der Client keine Aussage macht, wird die Anfrage sogar direkt vom Browser abgefangen und erreicht den Server nicht. Nach Erhalt der HTTP-Anfrage vergleicht der Server die Domänen und verarbeitet nur Anfragen von derselben Domäne. Der Code von

pageA(www.jack.com/index.html) lautet wie folgt:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    console.log(xhr.responseText);
  }
};
xhr.open("get","http://www.jesse.com/data.php");
xhr.send(null);

pageB(www.jesse. com/ data.php)-Code lautet wie folgt:

<?php
  header("Access-Control-Allow-Origin: http://www.php.cn/");//与简单的请求相同
  header("Access-Control-Allow-Methods: GET, POST");//允许请求的方法
  header("Access-Control-Max-Age: 3628800"); //将这个请求缓存多长时间
  $data = array(&#39;a&#39;,&#39;b&#39;,&#39;c&#39;);//要返回的数据
  echo json_encode($data);//输出
?>

5.window.postMessage wird nicht häufig verwendet

window.postMessage (message,targetOrigin)-Methode Es handelt sich um eine neu eingeführte Funktion von HTML5. Sie können damit Nachrichten an andere Fensterobjekte senden, unabhängig davon, ob das Fensterobjekt zum gleichen Ursprung oder zu unterschiedlichen Ursprüngen gehört, derzeit IE8+, Firefox, Chrome, Opera und andere Browser unterstützen bereits die Methode window.postMessage.

pageA (www.jack.com/index.html) Code lautet wie folgt:

<iframe id="proxy" src="http://www.jesse.com/index.html" onload="postMsg()" style="display: none"></iframe>
<script type="text/javascript">
var obj = {
  msg: 'hello world'
}

function postMsg() {
  var iframe = document.getElementById('proxy');
  var win = iframe.contentWindow;
  win.postMessage(obj, 'http://www.jesse.com');
}
</script>

pageB(www.jesse.com/data.php)代码如下：
<script type="text/javascript">
window.onmessage = function(e) {
  console.log(e.data.msg + " from " + e.origin);
}
</script>

6. location.hash wird nicht häufig verwendet.

pageA(www.jack.com/index.html) Der Code lautet wie folgt:

function startRequest() {
  var ifr = document.createElement('iframe');
  ifr.style.display = 'none';
  ifr.src = 'http://www.jesse.com/b.html#sayHi'; //传递的location.hash 
  document.body.appendChild(ifr);
}

function checkHash() {
  try {
    var data = location.hash ? location.hash.substring(1) : '';
    if (console.log) {
      console.log('Now the data is ' + data);
    }
  } catch (e) {};
}
setInterval(checkHash, 5000);
window.onload = startRequest;

SeiteA(www .jack.com/proxy.html) Der Code lautet wie folgt:

parent.parent.location.hash = self.location.hash.substring(1);

SeiteB (www.jesse.com/ b.html) Der Code lautet wie folgt:

function checkHash() {
  var data = '';
  //模拟一个简单的参数处理操作
  switch (location.hash) {
    case '#sayHello':
      data = 'HelloWorld';
      break;
    case '#sayHi':
      data = 'HiWorld';
      break;
    default:
      break;
  }
  data && callBack('#' + data);
}

function callBack(hash) {
  // ie、chrome的安全机制无法修改parent.location.hash，所以要利用一个中间的www.a.com域下的代理iframe
  var proxy = document.createElement('iframe');
  proxy.style.display = 'none';
  proxy.src = 'http://www.jack/c.html' + hash; // 注意该文件在"www.jack.com"域下
  document.body.appendChild(proxy);
}
window.onload = checkHash;

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere Artikel zu verschiedenen domänenübergreifenden Methoden von Javascript finden Sie auf der chinesischen PHP-Website!