ブラウザのドメイン間ソリューション

4476 ワード

国境をまたぐ ajaxクロスドメイン

同源政策とは、2つのサイトが異なる場合を指す.2つのWebサイトは、相手のサイトにアクセスできません.

1.cookie，IndexDB,LocalStorage
2.Dom  
3.Ajax

同源は何を満たす必要がありますか?

プロトコル同じ

ドメイン名同じ

ポート同じ

まず、よく使われるajaxのドメイン間需要についてお話しします.

JSONP(JSONPはgetリクエストのみ送信)

JSONP                 ，    ，       
1.      script  
function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};
2.          ，                 ：

foo({
  "ip": "8.8.8.8"
});

WebSocketWebSocketは、異なるソースポリシー

をサポートします.

 Cookie            ，           。        ，      ，      document.domain  Cookie。

両ページともdocumentを設定する.domain = 'liuwen.com';

ページのいずれかにdocumentが設定.cookie = 'name = louden'

別のページでこのcookie:var allCookie=documentを読みます.cookie;

iframe 2つのページが異なると相手のDOMが手に入らず、典型的な例はiframeウィンドウとwindowである.Openメソッドが開いているウィンドウは、親ウィンドウと通信できません.

親ウィンドウ取得子ウィンドウ:

document.getElementById("myIFrame").contentWindow.document

サブウィンドウ親ウィンドウの取得:

window.parent.document.body

2つのウィンドウの1級ドメイン名が同じで、2級ドメイン名が異なる場合はdocumentを設定します.domainでいいです.
まったく異なるソースのWebサイトであれば、ドメイン間ウィンドウの通信問題を解決する3つの方法があります.

    -      
    - window.name
    -      API

フラグメントラベル

フラグメントラベルはURLの#の後ろの部分、例えばhttp://163である.com/a.html#fragmentの#fragmentは、クリップマーカーを変更するだけではページが再リフレッシュされません.

親ウィンドウは、情報をサブウィンドウのクリップマーカーに書き込むことができる:

var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;

サブウィンドウはhashchangeイベントを傍受することによって通知することができる:

window.onhashchange = checkMessage;

function checkMessage() {
  var message = window.location.hash;
  // ...
}

同様に、サブウィンドウは、親ウィンドウのフラグメントマーカー:

を変更することもできる.

parent.location.href= target + "#" + hash;

window.name

ブラウザウィンドウにwindowがあります.nameプロパティ、このプロパティの最大の特徴は、同じソースであるかどうかにかかわらず、同じウィンドウで前のページにこのプロパティが設定されている限り、後のページで読み取ることができることです.

親ウィンドウはまずサブウィンドウを開き、windowに情報を書き込む異なるソースのページをロードする.nameプロパティ:

window.name = data;

サブウィンドウメインウィンドウと同じドメインのURLにジャンプ:

location = 'http://parent.url.com/xx.html';

その後、メインウィンドウはサブウィンドウのwindowを読み取ることができる.name了:

var data = document.getElementById('myFrame').contentWindow.name;

利点はwindowです.nameは容量が大きく、非常に長い文字列を置くことができます.欠点は、サブウィンドウwindowを傍受しなければならないことです.nameプロパティ値の変化は、ページのパフォーマンスに影響します.
window.postMessage
HTML 5の新しいAPI:ドキュメント間通信API.
親ウィンドウhttp://aaa.comサブウィンドウhttp://bbb.comメッセージを送信し、postMessageメソッドを呼び出せばいいです.
var popup = window.open('http://bbb.com', 'title');popup.postMessage('Hello World!', 'http://bbb.com');
PosetMessageメソッドの最初のパラメータは、メッセージを受信するウィンドウのソース、すなわち「プロトコル+ドメイン名+ポート」である具体的な情報内容である.ドメイン名を制限せず、すべてのウィンドウに送信することを示す*に設定することもできます.

サブウィンドウ親ウィンドウにメッセージを送信する方法は似ています:

window.opener.postMessage('Nice to see you', 'http://aaa.com');

親ウィンドウと子ウィンドウはmessageイベントを通じて、相手のメッセージを傍受することができます:

window.addEventListener('message', function(e) {
  console.log(e.data);
},false);

Messageイベントのイベントオブジェクトeventには、次の3つのプロパティがあります.

    - event.source:       
    - event.origin:       
    - event.data:

次に、いくつかの例を示します.

サブウィンドウはeventを通過する.ソース属性は親ウィンドウを参照し、情報を送信します:

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  event.source.postMessage('Nice to see you!', '*');
}

event.originプロパティは、このウィンドウを送信しない情報をフィルタできます:

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  if (event.origin !== 'http://aaa.com') return;
  if (event.data === 'Hello World') {
      event.source.postMessage('Hello', event.origin);
  } else {
    console.log(event.data);
  }
}

Qt国際化:中国文化(漢化)

Webにおける中国語の文字化けしの処理