前端制作之微信小技巧__避免a标签跳转到手机自带浏览器

随着微信的越来越大众化,微信的使用程度也越来越高。随之,产生了一种新的推广模式,即微信推广。在这个微信的大平台上会衍生出许许多多的推广手段。而移动前端作为服务于手机用户的手机网页技术,也不可避免的加入进来。

一些客户不仅仅满足于自己的网站可以在手机浏览器上完美的展现出来,同时还要求可以在微信中进行广泛推广。这就要求移动前端的制作者在制作移动端网站的过程中,还要考虑是否兼容微信的推广。

就制作技术而言,如果可以完美的在手机浏览器中显示,那么在微信推广里也可以完美显示。因为微信中调用的网页引擎就是你手机支持的网页引擎。但在微信中显示的网页和在手机浏览器中显示的网页还是有一些细微的差别,这些细微的差别则决定了一些使用小技巧的可能。

微信对手机网页的支持不是百分之百的,它因为自身业务发展的需要,对网站中的a标签进行了二次封装定义。一些使用在a标签的js代码,在某些特定情况下不产生效果了。而有些a标签则莫名的产生了一些问题。

我举2个例子来说明:

例子1:<a href="tel:400-4000-0000" >XXX</a>

这个a标签里的href调用的是手机号码。当点击这个a标签的时候则弹出是否拨打该号码的提示。在手机浏览器中使用是没有任何问题的,但在微信中,在安卓系统手机,微信5.0.1以上版本时该标签就失效了。(最新的微信版本是否解决了这个问题目前还不清楚)。这种情况下,将:

<a href="tel:400-4000-0000" >XXX</a>改为

<a link="tel:400-4000-0000" >

则可以解决部分安卓机型,(但不是全部的),有些机型依然不行。这个和微信客户端有关。目前没有找到满意的解决办法。

例子2:

这个例子比较抽象。我截图说明:

当点击阅读全文的时候进入到一个网站的首页,这时这个首页下面的三个按钮则是使用<a>标签制作的,当点击其中一个按钮时,他会莫名其妙的跳回到首页。这个是由于当前微信端调用的是微信的视图窗口,而非本身手机浏览器窗口。当点击a标签的时候,它会由当前的微信视图窗口自动跳到由微信调用的手机浏览器窗口上。所以才会出现这种情况,解决这种情况的出现则加上以下代码即可:说原理其实就是阻止了a标签的跳转:

$(document).on("click","a",function (event){
    event.preventDefault();
    if ($(event.target).attr("href")){
        location.href = $(event.target).attr("href");
    } else {
        location.href = $(event.target).parent().attr("href");
    }

}
);

这样一来,就可以在微信端视图窗口中阻止了a标签的跳转,也就是阻止了由微信端视图窗口跳到微信端调用的手机浏览器窗口的动作了。

可能有人会觉得这里有点绕。没有关系,介绍下面的小技巧的时候,再发一张截图就可以说明问题了。也就不绕了。

刚才的这个界面是通过微信端的阅读全文来进入的。此时进入的是微信端自己的视图窗口,而非微信端调用手机浏览器的窗口!但是如果我在这个页面中,随便点击一个可跳转的按钮,再进入新的页面的时候,这个时候就不是微信端自己的视图窗口了。而是来到了微信端调用手机浏览器的窗口,以下是截图:

注意我画红圈的地方,如果出现了这个工具条则证明你现在已经在微信端调用手机浏览器的窗口中了。而
微信端自己的视图窗口是不带这个工具条的。就像刚才的图那样

这个是不带工具条的。

这个就是微信端自己的视图窗口和微信调用手机浏览器窗口二者的最大区别!

我使用的手机是iphone4s,众所周知现在的手机屏幕是越来越大。但还是有相当一部分人在使用iphone4s,4s的屏幕较小。所以可视区域也较小。尤其高度!这个时候问题就来了。如果当前的网站只有一个页面的话,在微信端窗口中浏览还尚可,但如果是多个网页的话,当跳转到新的页面的时候微信会调用手机浏览器窗口了。此时页面中就会出现刚才我画红圈部分的工具条。这个工具条再加上上面的标题栏工具条。极大的减少了可视区域的面积。能否将它去掉呢?答案是可以的。加入以下代码就可以去掉微信中下面的工具条:

document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady(){

WeixinJSBridge.call(‘hideToolbar‘);

});

其实不光可以去掉下面的工具条,还可以去掉其他在微信中一些功能性按钮。比如右上角的功能按钮:

document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady(){

WeixinJSBridge.call(‘hideOptionMenu‘);
});

这个只是不经常用。如果功能按钮都隐藏了。像什么发送给朋友,分享到朋友圈等功能就不能用了。这也就失去了微信推广的功能。失去了使用微信的本质。除非有特殊需求,一般是不会隐藏该按钮的,没有多大现实意义。

时间: 2024-10-12 22:57:48

前端制作之微信小技巧__避免a标签跳转到手机自带浏览器的相关文章

移动前端工作的那些事---前端制作之微信小技巧篇

移动前端工作的那些事---前端制作之微信小技巧篇_WebApp赵海洋_新浪博客 移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20:47) 转载▼移动前端工作的那些事---前端制作之微信小技巧篇,布布扣,bubuko.com

微信发一个网址打开后自动调用手机自带默认浏览器或提示选择浏览器打开如何实现?

现在我们经常用方法一般有2种.配合到我们防止查杀系统 (通过屏蔽和监测一些腾讯的域名等.从而避免系统的查杀.保证链接在微信和QQ中一直可以直接打开.不用担心被封禁从而无法打开的情况!!) 1.遮罩引导法,这种事最简单的方法.方式如下图(适用于下载,微信活动等) 2.这种就是利用一些BUG,安卓手机的话是通过点击链接,直接跳转出微信.自动打开手机默认的浏览器.但是这个方法IOS的系统不行.所以只能写判断了.安卓手机用户点击直接打开默认浏览器进行活动营销或者下载APK.IOS的话用上面说的第一种方法

前端PS切图小技巧

切图,重要的是找精确像素!不要在用传统的切刀进行切割啦,拿到一副PSd图形的,可以使用这样两种方式: (1)如果你的图层很多,你可以用“ctrl+点击想要的图片“直接选中你想要图片的图层,简单到位,然后将图层转化为智能对象(当然可以几个图层拼到一起),然后双击弹出点击确定,就ok了: (2)对于大图,这个时候就有很多的东西存在,这里就使用,选区先选中你要切的图形,然后”编辑-合并拷贝-新建-拷贝“,就能建立一个完成整的图片切图的样子了,就ok了. 注意:这里的有几点说明: (1)切图要拉好参考线

CALayer动画---使用CAShapeLayer制作类似微信小视频按钮动画

废话少说,直接上代码.工程截图如下图所示.由于对程序进行了封装,所以在主控制器中,只需要给出该customview的frame即可,显示图形的半径等于给出frame的宽度的一半. 例如: CustomView *customView = [[CustomView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)]; 也就是在位置为(0, 0)处创建出一个半径为100/2=50的view. 图1   工程截图 1 CustomView.m文件中实现的代码

web前端35个jQuery小技巧!

废话不说 直接代码,有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(docu

Lync 小技巧-39-批量-设置-AD-分机-手机-启用-Lync-设置-Lync-分机

环境: 1. 有AD用户,但是没分机号 2. 有Lync Server 2013环境,但是大量用户没有启用,没有设置分机号 3. 批量完成任务 目的: 1. 记录过程 2. 方便后续使用 过程: 1. 新建用户 LyncDemo081 Aa123456 2. 查询-Lync 3. 查看-脚本 EmpNO,PhoneNumber,MobileNumber LyncDemo081,8081,13811111111 #设置CSV文件的位置 $users=Get-Content 'D:\Set-ADUs

微信小程序开发(九)获取手机连接的wifi信息

// succ.wxml <view>WIFI ssid:{{wifissid}}</view> <view>WIFI bssid:{{wifiBssid}}</view> // succ.js var app = getApp() Page({ data: { wifissid: '', // WIFI ssid wifiBssid: '' // WIFI bssid }, onLoad: function (e) { // 获取参数 var that =

微信小程序开发(十三)安卓手机调用wx.getConnectedWifi API失败

安卓手机调用wx.getConnectedWifi API失败,返回的错误码是12000.需要先startWifi 接口: wx.startWifi({ success(res) { console.log(res.errMsg, 'wifi初始化成功') }, fail: function(res){ console.log(res.errMsg, 'wifi初始化失败') } }) // wx.connectWifi({ // SSID: '', // password: '', // su

微信内置浏览器怎么才能自动跳转到手机自带浏览器

上半年公司有一个新的APP项目上线,我们在项目首页做个二维码,然后用户用手机扫一扫就能下载了.但是很多用户反映扫一扫之后下载不了,了解之后才知道这些用户都是使用的微信的扫一扫,而我们开发测试人员一般使用uc之类的浏览器做扫描.上网查了一下,微信自带的内置浏览器屏蔽了下载功能,所以才出现用微信扫一扫不能下载的情况.这时候我们一般会建议用户使用uc或者其他第三方浏览器自带的扫一扫功能下载.但是现在的微信太普及了,很多人都习惯性的使用微信来扫码下载,总不能每个用户都解释一遍,所以我们一直在寻找解决方案