I just wanted to make a small thing that combines winform with html5. I suddenly became interested and wanted to embed a WeChat web version in it.
Okay, as soon as the idea comes up, take action. The final effect is as follows:
From the beginning, I planned to embed an iframe in the page and point to https://wx.qq.com, which would be OK, but I was still too naive, and the WeChat web version would automatically jump. The result is as shown below:
So I searched online for a way to prevent iframe jumps, which is to add the two attributes security=restrictedsandbox= to the iframe tag. The former is a function of IE that prohibits js, and the latter is a function of HTML5.
Use sandbox=allow-scripts allow-same-origin allow-popups to prevent jumps. However...the result is this:
Then I discovered that this jump is actually browsing to the jump page after closing the original page. So you can use the page closing event onbeforeunload to prevent the jump. So add the following code to the page:
document.body.onbeforeunload = function (event) { var rel = asdfawfewf; if (!window.event) { event.returnValue = rel; } else { window.event.returnValue = rel; } };Then I found that the result is still like this:
What is the reason? No response to the incident? Or is the jump in the WeChat web version too awesome? Just ignore this incident? So I created a new blank html and added the event separately for verification.
<!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; if (!window.event) { event.returnValue = rel; } else { window.event.returnValue = rel; } }; </script> </html>The result is feasible:
But after embedding the iframe in the page, it jumps directly. You can try the following code.
<!DOCTYPE html> <html lang=en xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset=utf-8 /> <title></title> </head> < body> <iframe src=https://wx.qq.com/ frameborder=0 style=position: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%> </iframe> </body> <script> document.body.onbeforeunload = function (event) { var rel = asdfawfewf; if (!window.event) { event.returnValue = rel; } else { window.event.returnValue = rel; } }; </script> </html>When I was out of ideas, I kept turning it on and off to see if this method worked. Suddenly I discovered that if the page is closed within a short period of time after it is opened, the onbeforeunload event will not be triggered. After waiting for a few seconds and then closing the page, the event will be triggered and a prompt will appear.
Come, try the iframe delayed assignment to src (JQuery is quoted here).
<!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: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%> </iframe> </body> <script> $(function () { setTimeout(function () { iframe.src = https: //wx.qq.com/; },5000); }); document.body.onbeforeunload = function (event) { var rel = asdfawfewf; if (!window.event) { event.returnValue = rel; } else { window.event.returnValue = rel; } }; </script> </html>The result is indeed successful. A prompt will appear whether to leave this page. Click the Leave button. There is no jump on success. The picture below is a picture of my finished product.
You're done. You can chat and transfer files normally, but you can't take screenshots.
The disadvantage is that you need to click the pop-up cancel button to complete the login, and it needs to be done twice. The first time to open the page, and the second time after scanning the QR code, the page will jump again. There is currently no way to solve this problem. I hope friends who have a way to solve this problem can give me some suggestions~~ The editor will reply to you in time. I would also like to thank you all for your support of the VeVb Wulin website!