Método de solução do problema de não suporte ao showModalDialog e não retorno de returnValue no Chrome

What?O diálogo modal está inativo?

Modificamos e testamos um projeto de gerenciamento de backend na semana passada, ao testar a compatibilidade com diferentes navegadores, descobrimos que o método showModalDialog no navegador Chrome não exibe um diálogo modal, parece abrir uma nova página, e a janela pai ainda pode obter foco livremente e abrir várias janelas, além disso, o valor de retorno returnValue não pode ser retornado e sempre é undefined. Muitos desses problemas são muito doloridos, então testamos os navegadores mais recentes e populares.

navegador	Suporte	Estado
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	Não é um diálogo modal, mas sim uma nova janela aberta por open
Opera12.0	×	Nada acontece, nem mesmo uma janela é aberta

O que o Chrome realmente abre

Porque não foi aberto um diálogo modal, mas sim uma nova janela como se tivéssemos aberto uma nova janela, então é suficiente verificar se window.opener da janela filha está vazio para entender.

<script type="text/javascript">
    alert(window.opener);
</script>

No Chrome exibe um objeto [object window], enquanto o IE é undefined. Agora sabemos que o Chrome trata showModalDialog como window.open. Isso significa que podemos usar window.opener para operar janelas filhas do navegador Chrome. Ainda descobri um fenômeno interessante: no Firefox, o window.opener também não é vazio, então testei novamente a situação de window.opener e window.dialogArguments usando showModalDialog em diferentes navegadores em janelas filhas. Devido ao fato do Opera não abrir nenhuma janela, a testagem foi excluída.

Explicando o método showModalDialog do pai, a transmissão de arguments é um objeto window, aqui estão os resultados do teste: }}

navegador	diálogo modal	window.opener	window.dialogArguments	returnValue
IE9	○	undefined	[object Window]	○
Firefox13.0	○	[object Window]	[object Window]	○
safari5.1	○	[object Window]	[object Window]	○
chrome19.0	×	[object Window]	undefined	×

Os resultados dos testes acima mostram que o suporte de cada navegador é diferente. Além disso, é necessário mencionar que, no navegador Firefox, se a janela filha for recarregada, window.dialogArguments também será perdida e se tornará undefined. Dos resultados mencionados acima, podemos ver que o valor de retorno returnValue só é undefined no navegador Chrome, enquanto outros navegadores não têm problemas. Então, como resolver esse problema?

Solução do problema returnValue

Através dos vários testes acima, já sabemos que o método showModalDialog do Chrome é muito semelhante a uma execução do método window.open, então podemos usar window.opener para implementar a função window.returnValue.

Atenção: o parâmetro aleatório temp = Math.random() é usado para resolver problemas de cache. Muitos amigos testaram que undefined é devido ao problema de cache. Adicionado em2012-10-17

parte do código JavaScript da janela pai:

window.onload = function () {
  var returnValue = window.showModalDialog("son.html?temp=" + Math.random(), window);
  //for chrome
  if (returnValue == undefined) {
    returnValue = window.returnValue;
  }
  alert(returnValue);
}

parte do código JavaScript da janela filha:

if (window.opener != undefined) {
    //for chrome
    window.opener.returnValue = "opener returnValue";
}
else {
    window.returnValue = "window returnValue";
}
window.close();

Isso também é compatível com os navegadores IE, FireFox, Chrome, Safari, etc.

Por último

Por último, alguém vai perguntar como implementar o diálogo modal? Acho que pode ser feito com algumas técnicas JavaScript, mas não recomendo fazer isso, também pesquisei muitos materiais e não consegui resolver esse problema muito bem. Claro, também podem haver outras idéias, como para não abrir mais janelas, pode-se definir o botão open como inativo ao clicar para abrir a janela, e torná-lo novamente ativo após fechar a janela filha. Esses podem ser praticados por vocês mesmos, talvez haja melhores métodos.

Por último, gostaria de dizer que, no design de páginas da web contemporâneo, é muito comum usar div para simular uma janela na página, estilo personalizado, interação muito boa, não é necessário usar janela modal, como simular na internet, hoje é aqui, o que está errado, por favor, muitos corrijam ~

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário, foi contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, troque # por @) para denunciar, forneça provas relevantes e, se confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.