Eu só queria fazer uma pequena coisa que combinasse winform com html5. De repente, fiquei interessado e queria incorporar uma versão web do WeChat nele.
Pronto, assim que surgir a ideia, entre em ação. O efeito final é o seguinte:
Desde o início, planejei incorporar um iframe na página e apontar para https://wx.qq.com, o que seria bom, mas ainda era muito ingênuo e a versão web do WeChat saltaria automaticamente. O resultado é mostrado abaixo:
Então, procurei online uma maneira de evitar saltos de iframe, que é adicionar os dois atributos security=restrictedsandbox= à tag iframe. A primeira é uma função do IE que proíbe js, e a última é uma função do HTML5.
Use sandbox=allow-scripts allow-same-origin allow-popups para evitar saltos. Porém... o resultado é este:
Então descobri que esse salto é, na verdade, navegar para a página de salto após fechar a página original. Portanto, você pode usar o evento de fechamento da página onbeforeunload para evitar o salto. Portanto, adicione o seguinte código à página:
document.body.onbeforeunload = função (evento) { var rel = asdfawfewf; if (!window.event) { event.returnValue = rel } else { window.event.returnValue = rel;Então descobri que o resultado ainda é assim:
Qual é o motivo? Nenhuma resposta ao incidente? Ou o salto na versão web do WeChat é incrível demais? Apenas ignore este incidente? Então criei um novo html em branco e adicionei o evento separadamente para verificação.
<!DOCTYPE html> <html lang=en xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset=utf-8 /> <title></title> </head> < body></body> <script>document.body.onbeforeunload = function (event) { var rel = asdfawfewf; rel; } else { window.event.returnValue = rel } };O resultado é viável:
Mas depois de incorporar o iframe na página, ele salta diretamente. Você pode tentar o código a seguir.
<!DOCTYPE html> <html lang=en xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset=utf-8 /> <title></title> </head> < corpo> <iframe src=https://wx.qq.com/ frameborder=0 estilo=posição: absoluto;borda: navajowhite;esquerda: 0;altura: calc(100% - 30px);largura:100%> </iframe> </body> <script> document.body.onbeforeunload = function (evento) { var rel = asdfawfewf; if (!window.event) { event.returnValue = rel }; senão { window.event.returnValue = rel } };Quando eu estava sem ideias, ficava ligando e desligando para ver se esse método funcionava. De repente, descobri que se a página for fechada dentro de um curto período de tempo após ser aberta, o evento onbeforeunload não será acionado. Depois de esperar alguns segundos e fechar a página, o evento será acionado e um prompt aparecerá. .
Venha, experimente a atribuição atrasada de iframe para src (JQuery é citado aqui).
<!DOCTYPE html> <html lang=en xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset=utf-8 /> <title></title> <script src=scripts /jquery-2.2.3.js></script> </head> <body> <iframe id=iframe frameborder=0 style=position: absoluto;border: navajowhite;esquerda: 0;altura: calc(100% - 30px);largura:100%> </iframe> </body> <script> $(function () { setTimeout(function () { iframe.src = https: //wx.qq.com/; },5000 }); document.body.onbeforeunload = função (evento) { var rel = asdfawfewf; if (!window.event) { event.returnValue = rel } else { window.event.returnValue = rel };O resultado foi realmente bem-sucedido. Um prompt aparecerá para sair desta página. Não há salto no sucesso. A imagem abaixo é uma foto do meu produto acabado.
Pronto. Você pode conversar e transferir arquivos normalmente, mas não pode fazer capturas de tela.
A desvantagem é que você precisa clicar no botão pop-up cancelar para concluir o login, e isso precisa ser feito duas vezes para abrir a página, e na segunda vez após escanear o código QR, a página irá pular novamente. . Atualmente não há como resolver este problema. Espero que amigos que tenham uma maneira de resolver esse problema possam me dar algumas sugestões ~~ O editor responderá a vocês a tempo. Site VeVb Wulin!