解决微信浏览器alert问题的原生js实现

最新推荐文章于 2024-02-28 15:44:18 发布
最新推荐文章于 2024-02-28 15:44:18 发布
阅读量5.5k 收藏 1
点赞数 2
文章标签： 微信浏览器 自定义alert弹框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27401917/article/details/91873532
版权 
今天遇见微信浏览器alert弹框问题，
怎么可以出现这个 关闭网页 ，好不容易获取的客户就这样流失吗？不！ 解决吧，正文如下 ，拿去自用 ，觉得有用请点个赞！






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--响应式的rem布局-->
    <script>document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';</script>
    <style type="text/css">
        #alertBtn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60%;
            height: .84rem;
            margin: .24rem auto;
            border-radius: .08rem;
            background: #e32742;
            font-size: .30rem;
            font-weight: 700;
            color: #fbf1b3;
            z-index: 2;
    </style>
    <!--自定义ALERT-->
    <script type="text/javascript">
        var Chef = {
            //body 的宽高
            'bodyH': document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight,
            'bodyW': document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth,
            //动态创建 style 标签添加样式
            'cssStyle': function () {
                var doc = document;
                var style = doc.createElement("style");
                if (style.styleSheet) {// IE
                    style.styleSheet.cssText = arguments[0];
                } else {// w3c
                    var cssText = doc.createTextNode(arguments[0]);
                    style.appendChild(cssText);
                }
                var heads = doc.getElementsByTagName("head");
                if (heads.length) {
                    heads[0].appendChild(style);
                } else {
                    doc.documentElement.appendChild(style);
                }
            },
            // 创建并显示遮罩层
            'createChef': function () {
                if (document.body.getElementsByClassName('Chef_opacity').length == 1) {
                    document.body.removeChild(document.body.getElementsByClassName('Chef_opacity')[0]);
                }
                var div = this.create('div');
                div.style.width = this.bodyW + 'px';
                div.style.height = this.bodyH + 'px';
                div.className = 'Chef_opacity';
                document.body.appendChild(div);
            },
            //alert 框
            'alert': function () {
                // 显示遮罩层
                this.createChef();
                // 创建
                var alertDiv = this.create('div'),
                    alertH2 = this.create('h2'),
                    alertX = this.create('span'),
                    alertP = this.create('p'),
                    alertBDiv = this.create('div'),
                    alertFirm = this.create('button');
                alertX.innerHTML = 'X';
                alertX.className = 'Chef_X';
                // 插号的click事件 什么都不做
                alertX.onclick = function () {
                    alertFirm.onclick();
                }
                // 确定按钮的click事件 什么都不做
                alertFirm.onclick = function () {
                    document.getElementsByClassName('Chef_opacity')[0].style.display = 'none';
                    document.body.removeChild(alertDiv);
                }

                //样式以及内容
                alertDiv.className = 'Chef_alert';
                if (arguments.length == 1) {
                    document.getElementsByClassName('Chef_opacity')[0].style.background = 'rgba(0,0,0,' + arguments[0].shade + ')';
                    alertDiv.style.top = arguments[0].offset;
                    if (arguments[0].width == undefined) {
                        alertDiv.style.width = '4.6rem';
                    } else {
                        alertDiv.style.width = arguments[0].width;
                        alertDiv.style.marginLeft = '-' + parseInt(arguments[0].width) / 2 + 'px';
                    }
                    arguments[0].title == undefined ? alertH2.innerHTML = '来自网页的信息' : alertH2.innerHTML = arguments[0].title;
                    arguments[0].content == undefined ? alertP.innerHTML = '' : alertP.innerHTML = arguments[0].content;
                    arguments[0].firm == undefined ? alertFirm.innerHTML = '确定' : alertFirm.innerHTML = arguments[0].firm;
                } else {// -- 默认提示信息
                    alertH2.innerHTML = '来自网页的信息';
                    alertFirm.innerHTML = '确定';
                }
                // 添加到页面
                alertBDiv.appendChild(alertFirm);
                // alertH2.appendChild(alertX);
                alertDiv.appendChild(alertH2);
                alertDiv.appendChild(alertP);
                alertDiv.appendChild(alertBDiv);
                document.body.appendChild(alertDiv);
            },
            //创建
            'create': function () {
                return document.createElement(arguments[0]);
            }
        };
        ;(function (Chef) {
            var cssString = '\
                    *{padding:0;margin:0;}\
                    .Chef_opacity{display:block;background:rgba(0,0,0,0.8);position:fixed;top:0;z-index:99;}\
                    .Chef_alert{position:fixed;top:50%;left:50%;width:4.6rem;border-radius:.08rem;margin:-2rem 0 0 -2.3rem;background:white;z-index:100;text-align: center;font-size:.18rem}\
                    .Chef_alert>h2{width:90%;margin:10px auto;margin-bottom:0;font-size:.24rem;}\
                    .Chef_alert>p{width:100%;margin:0 auto;padding:.25rem 0;border-bottom:1px solid #d8d8d8;font-weight:700;}\
                    .Chef_alert>div{height: .6rem; margin: .20rem auto;}\
                    .Chef_alert>div>button{width:50%;height:100%;border:0;outline:0;font-size:.20rem;color:#e32742;background:none;}\
                    .Chef_X{float:right;font-size:13px;color:grey;cursor:pointer;font-weight:normal;}\
                    ';
            Chef.cssStyle(cssString);
        })(Chef);
    </script>
</head>
<body>
<button id='alertBtn'>alert弹窗</button>
<script type="text/javascript">

    document.getElementById('alertBtn').onclick = function () {
//调用 Chef.alert() 方法
        Chef.alert({
            'title': '',
            'content': '成功！',
            'firm': '确定',
        });
    }

</script>

</body>

</html>
望京十三兄
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信端的alert
kaikai4的专栏
07-28 7820
新出来个，尝试下 https://github.com/t4t5/sweetalert qinxiaotong 2015-06-25 22:17:40 给你一个TAOBAO的，我用的是zepto，应该和jQuery兼容 msg.js: function compareVersion(v1, v2) { v1 = v1.toString()
让alert不出现弹窗的两种方法
12-11
代码如下: [removed] function window.alert(str){ //这里为空 } alert(“fffffff”); [removed] 把重载后的alert函数定义function window.alert(str){}放到一个公共的js文件中 就再不受alert的麻烦了 如果还要提示的话，采用这样的办法定义 function window.alert(str){ // 在这里打开一个模式对话框 显示str字符串 延时 20ms关闭 即可 }
项目之微信授权、ajax重复、移动端页面拖动、alert弹框等问题大合集
这个世界上有各种各样的人.
01-09 599
微信授权、ajax重复、移动端页面拖动、alert弹框、判断移动端系统是安卓还是ios等问题大合集
微信中打开h5 alert弹窗关闭不生效
wsdbz的博客
01-20 1494
需求：微信扫描二维码跳转h5页面 在h5请求接口成功跳转成功页面 不成功则弹框显示不成功结果 点击确认之后关闭当前页面 代码 alert("请求不成功") window.WeixinJSBridge.call('closeWindow) ...
android 调用javascript 无法弹出Alert的解决办法
学无止境
08-19 3894
最近在用android嵌套html但是 html的alert会弹不出来。后来写了n多方法不行 最后发现 webview只是一个承载体，各种内容的渲染需要使用webviewChromClient去实现，所以set一个默认的基类WebChromeClient就行，代码如下： mWebView.setWebChromeClient(new WebChromeClient());
html调试的时候弹出一直消失,微信开发者工具debug模式下，访问url没有跳出alert弹窗...
weixin_42320493的博客
06-03 522
开发者工具访问的截图如下：根据开发者文档的步骤没有发现出问题的点。js域名绑定使用的是测试公众号。app.js代码：'use strict'var Koa = require('koa')var serve = require('koa-static')var wechat = require('./wechat/g')var path = require('path')var config = ...
ios微信浏览器返回不刷新问题完美解决方法
08-29
iOS 微信浏览器返回不刷新问题完美解决方法 iOS 微信浏览器返回不刷新问题是开发者常遇到的问题之一，该问题的解决方案将在本文中详细介绍。 什么是 iOS 微信浏览器返回不刷新问题？ iOS 微信浏览器返回不刷新...
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
10-17
主要介绍了PHP基于curl实现模拟微信浏览器打开微信链接的方法,结合实例形式分析了php使用curl通过设置HTTP_USER_AGENT实现模拟微信浏览器相关操作技巧,需要的朋友可以参考下
最新版微信完美解决微信浏览器内长按识别个人收款码
04-23
解决微信8.0.32新版本手机微信不能长按识别个人收款码问题下载源代码一看及懂
JavaScript禁止微信浏览器下拉回弹效果
01-19
本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果，供大家参考，具体内容如下 方法1： [removed] var overscroll = function(el){ el.addEventListener('touchstart', function(){ var top = el....
IOS微信端confirm以及alert去掉网址的实例代码
01-21
在做微信公众号开发时IOS端的微信浏览器打开，触发confirm以及alert时弹出框会有附带当前网址信息，Android端的没有测试，不知道是否有同样的情况。 解决办法如下： “` window.alert = function(name){ var iframe = document.createElement(IFRAME); iframe.style.display=none; iframe.setAttribute(src, 'data:text/plain,'); document.documentElement.appendChild(iframe); windo
解决微信浏览器Javascript无法使用[removed].reload()刷新页面
01-19
场景是这样子的，页面在初始化时有一个ajax请求，在页面上有一个按钮，点击的时候执行[removed].reload()，正常情况reload()后页面依然会向后台发出请求，但在安卓的微信浏览器中reoad后请求的一直是第一次打开页面...
iphone11 微信公众号h5，alert只弹出一次问题
最新发布
qq345oo的博客
02-28 520
在开发微信公众号h5真机调试的时候， 只有第一次访问页面时，alert会弹出一次，再次进入就不弹出了， 所以调适iphone h5页面的时候不要使用alert， 以免造成困惑。
js弹出框、对话框、提示框、弹窗总结
热门推荐
2301_76965813的博客
04-19 1万+
一、JS的三种最常见的对话框[javascript二、点击按钮时常用的6中提示框和操作[html] 三、弹出独立窗口[javascript] 参数解释：window.open 弹出新窗口的命令； ‘page.html’ 弹出窗口的文件名； ‘newwindow’ 弹出窗口的名字（不是文件名），非必须，可用空”代替； 　　height=100 窗口高度； 　　width=400 窗口宽度； 　　top=0 窗口距离屏幕上方的象素值； 　　left=0 窗口距离屏幕左侧的象素值； 　　toolba
3-4Dom形XSS详解以及演示
山兔的博客
04-21 3487
学习DOM型XSS前，先搞清楚什么是DOM 通过 JavaScript，可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript 就需要获得对HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。 所以，你可以把DOM理解为一个可以访问HTML的标准编程接口。 举个栗子来理解一下DOM <html><head> <sc
微信出现关闭网页
weixin_33883178的博客
04-17 906
　　做测试时频繁点击一个按钮，返回alert，正常时alert框如下 多次测试后出现如下 出现了个关闭网页，想必是微信的一种机制，模糊记得之前也出现过这个关闭网页的情况，大家不用担心 转载于:https://www.cnblogs.com/yanan7890/p/8862393.html...
自定义alert文本内容左对齐
zhangqq16781的博客
01-04 1652
- (void) showAlertWithMessage:(NSString *) message{         UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"关于开播提醒" message:message preferredStyle:UIAlertController
微信浏览器缓存问题怎么解决
06-03
微信浏览器缓存问题可能会导致页面无法更新或加载出现问题。解决方法如下： 1. 强制刷新页面：在微信浏览器中，可以通过在地址栏上下滑动，或者在网址后面加上一个随机数的方式来强制刷新页面。如：http://www.example.com?rand=123456。 2. 清空浏览器缓存：在微信浏览器中，可以通过清空浏览器缓存的方式解决缓存问题。打开微信浏览器设置页面，找到“清空缓存”选项，执行清空操作即可。 3. 修改资源文件名称：如果是静态资源文件缓存问题，可以通过修改资源文件名称的方式解决。比如在CSS或JS文件的链接后面加上版本号或者随机数，每次访问时链接都会改变，从而避免缓存问题。 4. 修改网站服务器设置：可以通过设置网站服务器响应头信息的方式来解决缓存问题。在HTTP响应头中添加Cache-Control、Expires等信息，可以控制浏览器缓存时间或者禁止缓存。 希望以上方法能帮助你解决微信浏览器缓存问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值