How to prevent iframe from jumping to the page in HTML and use iframe to embed WeChat web version in the page
|
I just want to make a small thing that combines winform with html5, and suddenly I have the interest to embed a WeChat web version in it. Well, once the idea comes out, let's take action. The final effect is as follows:
At the beginning, I planned to embed an iframe in the page to point to https://wx.qq.com, but I was too naive and the WeChat web version would jump automatically. The results are as follows:
So I searched online for a way to prevent iframe redirects, which is to add two attributes, security="restricted" and sandbox="" to the iframe tag. The former is IE's function of disabling js, and the latter is a function of HTML5. Use
Then I found that this jump is actually closing the original page and then browsing to the jump page. Therefore, 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 was still like this:
What is the reason? No response to the incident? Or is it that the jump of WeChat web version is too awesome? Just ignore this incident? So I created a blank html and added this event alone 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:
However, 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 at a loss, I kept turning this method on and off to see if it worked. Suddenly I found that if the page is closed within a short time after it is opened, the onbeforeunload event will not be triggered. If you wait for a few seconds and then close the page, the event will be triggered and a prompt will appear. Come, try to delay the iframe to assign src value (JQuery is referenced 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 was successful. A prompt will appear asking whether to leave this page. Click the Stay button. No jump on success. The picture below is my finished product.
It’s done. You can chat and transfer files normally, but you can’t take screenshots.
The disadvantage is that to complete the login, you need to click the pop-up cancel button twice, the first time to open the page, and the second time after scanning the code, the page will jump again. There is currently no way to solve this problem. I hope that friends who know how to solve this problem can give me some suggestions. I will reply to you in a timely manner. Thank you very much for your support of the 123WORDPRESS.COM website! |
<<: Detailed explanation of MySQL persistent statistics
>>: Implementation of whack-a-mole game in JavaScript
Recommend
Detailed explanation of how to use CMD command to operate MySql database
First: Start and stop the mysql service net stop ...
Solution to the paging error problem of MySQL one-to-many association query
The query data in the xml price inquiry contains ...
Windows 10 and MySQL 5.5 installation and use without installation detailed tutorial (picture and text)
This article introduces the installation and use ...
MySQL index coverage example analysis
This article describes MySQL index coverage with ...
Detailed explanation of the English names corresponding to the font-family of Chinese fonts in CSS styles
Songti: SimSun Bold: SimHei Microsoft YaHei: Micr...
Detailed explanation of Mysql's method of optimizing order by statement
In this article, we will learn about the optimiza...
How to set up jar application startup on CentOS7
Pitfalls encountered during project deployment Wh...
JavaScript flow control (loop)
Table of contents 1. for loop 2. Double for loop ...
Detailed tutorial on running selenium+chromedriver on the server
1. Introduction I want to use selenium to scrape ...
Detailed example of using typescript to encapsulate axios in Vue3
This axios package is used in the vue3 demo. For ...
After idea publishes web project, Tomcat server cannot find the project and its solution
Overview The project was created successfully and...
Detailed explanation of MySQL covering index
concept If the index contains all the data that m...
Tutorial on installing MySQL 5.7.9 using RPM package under CentOS 7
Recorded MySQL 5.7.9 installation tutorial, share...
js to achieve the effect of light switch
This article example shares the specific code of ...
How to adapt CSS to iPhone full screen
1. Media query method /*iPhone X adaptation*/ @me...