移动端【监听物理返回】

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>checkout</title>
  8     <style>
  9         .stream-discount {
 10             word-spacing: 0;
 11             letter-spacing: 0;
 12             width: 100%;
 13             height: 100%;
 14             position: fixed;
 15             top: 0;
 16             left: 0;
 17             z-index: 1000000001;
 18             background-color: rgba(0,0,0,0.75);
 19         }
 20         .main{
 21             position: relative;
 22             width: 70vw;
 23             top: 50%;
 24             left: 50%;
 25             transform: translate(-50%,-50%);
 26         }
 27         .main .img{
 28             width: 100%;
 29         }
 30         .main .close-btn{
 31             position: absolute;
 32             right: 0;
 33             top: 0;
 34             width: 60px;
 35             height: 60px;
 36             text-align: center;
 37             line-height: 60px;
 38             color: #fff;
 39             font-size: 30px;
 40             font-weight: bold;
 41         }
 42     </style>
 43 </head>
 44 <body>
 45     <h1>我是checkout</h1>
 46     <form action="./checkout.html" id="form">
 47         <input type="text" id="name" name="name" placeholder="姓名">
 48         <button type="submit"> 提交 </button>
 49     </form>
 50     <script>
 51         s = function() {
 52             window.history.pushState(Object.assign(window.history.state || {}, {
 53                 key: "his-push-01"
 54             }), "", "#1")
 55         }
 56         m = function() {
 57             return null !== navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|HUAWEI)/i) ? "MOBILE" : "PC"
 58         }
 59         T = function() {
 60             var e = document.createElement("div");
 61             if (e.setAttribute("class", "stream-discount"),
 62             e.innerHTML = `<div class="main">
 63                         <div class="close-btn">×</div>
 64                         <img src="https://imgs.prettysan.com/uploads/public/62f/b71/246/62fb712460125692912600.jpg?x-oss-process=image%2Fformat%2Cwebp" alt="" style="width:100%;height: calc(1.07 * 70vw);">
 65                 </div>
 66             `,
 67             !document.querySelector(".stream-discount")) {
 68                 document.body.appendChild(e),
 69                 document.body.classList.add("stream-modal-show"),
 70                 sessionStorage.setItem("stream-checkout-discount", "stream-checkout-discount");
 71 
 72                 document.querySelector(".close-btn").addEventListener("click", (function() {
 73                     var t, e = document.querySelector(".close-btn").classList.contains("step-2") ? 2 : 1;
 74                     document.querySelector(".stream-discount .main").style.cssText = "top: -100%; opacity: 0;",
 75                     setTimeout((function() {
 76                         document.querySelector(".stream-discount").remove(),
 77                         t && t()
 78                     }
 79                     ), 250),
 80                     document.body.classList.remove("stream-modal-show")
 81                 }
 82                 ))
 83             }
 84         }
 85         M = function() {
 86             var t = sessionStorage.getItem("stream-checkout-discount");
 87             if (t)
 88                 return !1;
 89             if ("PC" === m()) {
 90                 document.documentElement.addEventListener("mouseleave", (function t(e) {
 91                     e.clientY <= 20 && (T(),
 92                     document.documentElement.removeEventListener("mouseleave", t))
 93                 }
 94                 ))
 95             } else
 96                 s(),
 97                 window.streamIntercept = function() {
 98                     T(),
 99                     window.removeEventListener("popstate", window.streamIntercept)
100                 }
101                 ,
102                 window.addEventListener("popstate", window.streamIntercept)
103             
104         };
105 
106         var C = function(t, e, n) {
107             if ("FBIOS" == (navigator.userAgent.indexOf("FB") > -1 && navigator.userAgent.indexOf("iOS") > -1 ? "FBIOS" : "ORTHER"))
108                 !function(t, e, n) {
109                     var o, r, i, a, c, s;
110                     t && e && (window.scrollTo(0, 5),
111                     document.addEventListener("touchstart", (function(t) {
112                         o = t.touches[0].clientX,
113                         r = t.touches[0].clientY
114                     }
115                     )),
116                     document.addEventListener("touchend", (function(t) {
117                         var e = document.body.scrollTop || document.documentElement.scrollTop;
118                         i = t.changedTouches[0].clientX,
119                         a = t.changedTouches[0].clientY,
120                         c = i - o,
121                         (s = a - r) > 14 && Math.abs(s) > Math.abs(c) && e <= 0 && (E(n)
122                     )}
123                     )))
124                 }(t, e, n);
125             else {
126                 var o = 0;
127                 t && e && (s(),
128                 window.streamIntercept = function() {
129                     1 === ++o ? (E(n),
130                     s()) : 2 === o ? O(n) : (window.removeEventListener("popstate", window.streamIntercept),
131                     history.go(-1))
132                 }
133                 ,
134                 window.addEventListener("popstate", window.streamIntercept))
135             }
136         }
137 
138         var o = {
139             action_log: 2,
140             discount_value: 0,
141             ga: "",
142             intercept: 2,
143             intercept_log: 2
144         }
145         var t = 1 === o.intercept_log,
146         e = 1 === o.intercept,
147         n = Math.abs(o.discount_value);
148         C(t, e, n)
149         M();
150     </script>
151 </body>
152 </html>
View Code

 

posted @ 2022-11-22 13:55  chengJun—  阅读(14)  评论(0编辑  收藏  举报