Devido às limitações do navegador (política da mesma origem), a questão do domínio cruzado do JavaScript sempre foi um problema muito difícil. O HTML5 fornece a função da transmissão de mensagens de documentos cruzados e recebe e envia informações entre documentos da Web. Usando essa função, não apenas as páginas da Web com a mesma origem (número de domínio + porta) se comunicam, mas também podem comunicar o domínio cruzado entre dois nomes de domínio diferentes.
Cross Document Messaging Cross Document Messaging fornece o método de pós-maquiagem para passar dados entre diferentes documentos da Web, suportando mensagens em tempo real. Muitos navegadores agora apoiarão esse recurso, como Google Chrome 2.0+, Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, Safari 4.0+, etc.
Então, o que devo fazer se IE6, IE7 e outros navegadores que não suportam HTML5?
Você pode usar o método Window.name porque a modificação do Window.name não envolve problemas de domínio cruzado. Embora não seja particularmente ideal para usar, o efeito é aceitável.
No entanto, não podemos escrever Window.PostMessage, Window.AddeventListener, Window.Name e outros conteúdos toda vez que estamos envolvidos em domínio cruzado.
Para esse fim, abstraguei todo o processo de domínio cruzado e o encapsulei em um plug-in JavaScript para resolver o problema de domínio cruzado de mão dupla, realizar a comunicação em tempo real entre diferentes documentos da Web e pode obter comunicação entre domínios entre dois nomes de domínio diferentes.
Endereço para download de demonstração: http://xiazai.vevb.com/201501/other/jcrossDomain_v2.rar, versão v2
plug-in de domínio cruzado javascript jcrossDomain.js
A cópia do código é a seguinte:
(function (win) {
/**
* Sem árvores florescentes
* 2013/12/07 17:12
*/
var _jcd = {
Isinitado: Falso,
Elmt: falso,
Hash: '',
delims: ',',
rand: function () {
retornar (nova data) .gettime ()
},
msg: function () {
alerta ('Aviso: você deve chamar a função init no primeiro');
},
init: function (retorno de chamada, elmt) {
if (_jcd.isinited == true)
retornar;
_jcd.isinited = true;
_jcd.elmt = elmt;
if (win.postMessage) {
// O navegador suporta o método HTML5 PostMessage
if (win.addeventListener) {
// suporta navegadores como Firefox, Google, etc.
win.addeventListener ("mensagem", function (ev) {
retorno de chamada.Call (Win, Ev.Data);
},falso);
} else if (win.attachevent) {
// Apoie o navegador do IE
win.attachevent ("onMessage", function (ev) {
retorno de chamada.Call (Win, Ev.Data);
});
}
_jcd.msg = function (dados) {
_jcd.elmt.postMessage (Data, '*');
}
}outro{
// O navegador não suporta métodos de pós -maquiagem HTML5, como IE6 e 7
setInterval (function () {
if (win.name! == _jcd.hash) {
_jcd.hash = win.name;
Callback.Call (Win, _Jcd.hash.split (_jcd.delims) [1]);
}
}, 50);
_jcd.msg = function (dados) {
_jcd.elmt.name = _jcd.rand () + _jcd.delims + data;
}
}
}
};
var jcd = {
initParent: function (retorno de chamada, iframeId) {
_jcd.init (retorno de chamada, document.getElementById (iframeId) .ContentWindow);
},
Initchild: function (retorno de chamada) {
_jcd.init (retorno de chamada, win.parent);
},
SendMessage: function (dados) {
_jcd.msg (dados);
}
};
win.jcrossDomain = JCD;
})(janela);
Métodos de chamada na página pai:
A cópia do código é a seguinte:
// Função de retorno de chamada personalizado
var cb = função (msg) {
alerta ("Get msg:" + msg);
};
// inicializar, carregar a função de retorno de chamada e ID do iframe
jcrossDomain.initparent (CB, 'iframea');
// Envie uma mensagem
jcrossDomain.sendMessage ('Olá, criança');
Métodos de chamada na subpagem:
A cópia do código é a seguinte:
// Função de retorno de chamada personalizado
var cb = função (msg) {
alerta ("Get msg:" + msg);
};
// Inicialize, carregue a função de retorno de chamada
jcrossDomain.initchild (CB);
// Envie uma mensagem
jcrossDomain.sendMessage ('Olá, pai');
Dicas de teste de simulação:
Para alcançar a comunicação entre diferentes domínios, dois nomes de domínio podem ser adicionados ao arquivo hosts do sistema operacional para simulação.
Adicione dois nomes de domínio diferentes ao arquivo hosts
127.0.0.1 parent.com
127.0.0.1 Child.com
A evolução dos programadores: