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
Solve the problem of secure_file_priv null
Add secure_file_priv = ' '； then run cmd ...
Detailed steps for developing Java payment interface for Alipay
Table of contents first step Step 2 Step 3 Step 4...
How to insert weather forecast into your website
We hope to insert the weather forecast into the w...
Complete guide to using iframe without borders or borders (practical experience summary)
<iframe src=”you page's url” width=”100″ he...
Summary of four ways to introduce CSS (sharing)
1. Inline reference: used directly on the label, ...
How to install and deploy ftp image server in linux
Refer to the tutorial on setting up FTP server in...
css3 animation ball rolling js control animation pause
CSS3 can create animations, which can replace man...
WEB Chinese Font Application Guide
Using fonts on the Web is both a fundamental skill...
7 useful new TypeScript features
Table of contents 1. Optional Chaining 2. Null va...
How a select statement is executed in MySQL
Table of contents 1. Analyzing MySQL from a macro...
Analysis and solution of the reasons for left and right jumps when loading web pages
I have been having this problem recently when desi...
Several common CSS layouts (summary)
Summary This article will introduce the following...
JavaScript canvas to achieve mirror image effect
This article shares the specific code for JavaScr...
Analysis of the advantages of path.join() in Node.js
You might be wondering why you should use the pat...
MySQL online log library migration example
Let me tell you about a recent case. A game log l...