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
MySQL 5.7.24 installation and configuration graphic tutorial
This article shares the installation and configur...
What do CN2, GIA, CIA, BGP and IPLC mean?
What is CN2 line? CN2 stands for China Telecom Ne...
Analysis of the difference between Mysql InnoDB and MyISAM
MySQL supports many types of tables (i.e. storage...
Optimal web page width and its compatible implementation method
1. When designing a web page, determining the widt...
Analysis of implicit bug in concurrent replication of MySQL 5.7
Preface Most of our MySQL online environments use...
JavaScript to implement random roll call web page
JavaScript writes a random roll call webpage for ...
Basic knowledge: What does http mean before a website address?
What is HTTP? When we want to browse a website, w...
How to start a Vue.js project
Table of contents 1. Node.js and Vue 2. Run the f...
CSS techniques for achieving multi-column equal height layout that the front end should master
1. Introduction When we are writing a page, we so...
Pure CSS and Flutter realize breathing light effect respectively (example code)
Last time, a very studious fan asked if it was po...
Complete steps for Nginx proxy front-end and back-end separation projects with the same domain name
The front-end and back-end projects are separated...
Use jQuery to fix the invalid page anchor point problem under iframe
The application scenario is: the iframe page has n...
Code for aligning form checkbox and radio text
Alignment issues like type="radio" and t...
css Get all elements starting from the nth one
The specific code is as follows: <div id="...
How to migrate the data directory in mysql8.0.20
The default storage directory of mysql is /var/li...