在上一篇文章中,已经讨论了程序的结构和页面的布局,并简单介绍了一些jQuery Mobile的使用技巧.在本篇文章中,笔者将继续完成我们web应用的新闻浏览器的设计. 程序的启动 我们现在来研究一下程序的启动.当程序启动的时候,展示给用户的是新闻分类列表的页面,为了让每次这个新闻分类页面不为空,我们需要记下用户之前选择了 哪些感兴趣的分类.为了实现这个目的,我们通过使用jQuery的一个插件DST.js plugin去把用户每次选择的新闻分类都保存在HTML5的localStorage中.如果用

前言 socket.io: 包含对websocket的封装,可实现服务端和客户端之前的通信.详情见官网(虽然是英文文档,但还是通俗易懂).Notification: Html5新特性,用于浏览器的桌面通知,只有部分浏览器支持.通过nodejs+Socket.io+Notification实现服务端往浏览器客户端发送自定义消息.若有问题可加群264591039与我讨论.转载请注明出处!原文链接:https://yezihaohao.github.io/2017/02/20/Socket-io-No

Notification 对象,存在于window上,可以生成一个通知对象以推送推送浏览器消息通知. 这玩意兼容性不咋地,实不实用看场景.对外用户的应用,自然是鸡肋功能,因为你无法知道用户使用的是哪家哪版本的浏览器:对内部系统的帮助则是很大,内部员工使用的浏览器是可控的,为了实现更大的工作效率,该功能可用于比如站内消息.跟踪事务状态变化等的通知,并且,这玩意只要不关闭通知所在的网页,即使浏览器活动标签不是这个网页,依然可以弹出通知,这样就可以在做其他工作的同时及时收到需要的消息了. 实现效果如图

首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差别. websocket通信?浏览器广告推送?html5自动更新?灵异事件? ----------------------------我是研究的结果华丽的分割线----------------------------

ipad用的是Safari Mobile浏览器,访问的UA为: Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 下面就介绍几个判断是否是ipad的浏览器的方法,都很简单. 使用javascript判断是否是ipad的浏览器 < script>function y

Web跨域已是老生常谈的话题,这次来尝试下跨域浏览器进程之间的通信 —— 这在过去基本依靠网络中转实现   在之前一篇文章里尝试了跨浏览器的数据共享,最后提到使用LocalConnection还可以实现跨浏览器消息交互的可行性. 花了两个晚上简略的研究了下,LocalConnection的单向通信非常的简单,不过要实现多个终端交互,必须自己实现一套消息机制,见智见仁了. 为了简单演示,本例使用了基于广播的观察者模式:每个终端可以订阅自己感兴趣的主题,也可以向广播发送消息,通知其他感兴趣的终端.

问题问题描述今天在做项目的时候,QA部门提了一个Bug,在一个搜索列表中,搜索栏为空时刷新页面,却触发了搜索功能,并且列表显示出<未搜索到结果> 环境IE11 问题原因 QA的IE11用户代理字符串使用了老版本,导致表单提交时,把搜索框中的属性值placeholder字段传入了后推断. 导致搜索条件为<请输入> placeholder属性在IE中,只有 IE11 支持简介只有IE浏览器中才会有“浏览器模式”和“文档模式”,兼容性视图涉及两个重要的功能便是“浏览器模式[browser

1.浏览器消息提示框 浏览器弹出框,可以在浏览器设置中被屏蔽掉,导致效果失效 alert() 2.easyui 框架提供的消息框 easyui 框架自带的消息框,不可以被屏蔽. $.messager.alert({ title : '提示信息!', msg : '请填写证件信息!' }); $.messager.show({ title : '提示信息!', msg : '操作失败,您没有权限进行该操作!' }); 3.后台系统的使用中建议使用框架自带的消息提示框,以免由于用户的设置,导致相关的

=======================PC浏览器======================== OperaMozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36 OPR/26.0.1656.60Opera/8.0 (Windows NT 5.1; U; en)Mozilla/5.0 (Windows NT 5.1; U; en

个人总结: 1.介绍了网页消息推送通知机制 全文地址:https://github.com/Troland/how-javascript-works 这是 JavaScript 工作原理的第九章. 现在让我们把注意力转移到网页推送通知:我们将会查看其构造,探索发送/接收通知背后的过程以及最后分享一下我们在 SessionStack 是如何计划利用这些功能来创建新的产品功能的. 推送通知这一功能在移动端已经非常普遍.不知为何,网页端的推送通知是千呼万唤始出来,即使大多数开发者强烈地要求实现这一功能

<script type="text/javascript"> //平台.设备和操作系统 var system = { win: false, mac: false, xll: false, ipad:false }; //检测平台 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; sy

最近要更新网站架构了,决定转入 nodejs + socket.io + redis 方式. 战斗刚开始: 网上的文章太松散,我根据各个网友的分享进行整理 ,让大家可以方便上手. 进入node.js之路,开始整理的资料 为什么需要 ? node.js + socket.io node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程体验,于是socket.io诞生.     socket

为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3826251.html Socket.IO简述 Socket.IO用于浏览器与node.js之间实现实时通信.Socket.IO设计的目标是支持任何的浏览器,任何Mobile设备.支持主流的PC浏览器 (IE,Safari,Chrome,Firefox,Opera等),Mobile浏览器(iphone Safari/ipa

这两天刚解决了ajax多浏览器兼容的问题,主要就针对Firefox的,开始还以为Firefox不支持ajax呢(别笑我呀,不怎么了解Firefox也没用过,呵呵),多亏看了下面的文章才让我了解ajax的适用范围.其实只要符合w3c的标准就可以在Firefox等这些浏览器上正常显示,所以还是应该好好了解一下w3c的标准规则呀. 不过要解决眼前的兼容问题首先注意以下几点:(这个也是网上找来的) ,document.getElementById替代document.all(ie适用) ,集合[]替代(

一.前后端常用通讯方式 1. ajax  浏览器发起请求,服务器返回数据,服务器不能主动返回数据,要实现实时数据交互只能是ajax轮询(让浏览器隔个几秒就发送一次请求,然后更新客户端显示.这种方式实际上浪费了大量流量并且对服务端造成了很大压力). 2. websocket websocket是HTML5出的东西(协议),是一种全双工通信机制,两端可以及时地互发事件,互发数据,相互通信,只需要浏览器和服务器建立一次连接,服务器就可以主动推送数据到浏览器实现实时数据更新.   原生 websocke

viewport预备知识 dpr === dppx dpr:device pixel ratio 设备像素比 dppx:Number of dots per px unit 每像素有多少点 . 1dppx = 96dpi dpr = 设备物理像素 / 设备独立像素 设备物理像素指显示在移动端中实际的像素.设备独立像素是css中定义的像素. 比如说iphone4 的 dpr = 2,而此时设置border的宽度为1px(设备独立像素),那么此时设备物理像素为2px.所以在移动端上看到的是2px的边

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进行下载. 2.准备项目模板文件夹 接下来,我们为第一个项目创建一个文件夹以及一些基本的文件.谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去. 2.1 下载H5BP 访问网站链接地址:https://html5boiler

介于公司目前还没有涉及WP(WindowsPhone)项目的开发,而我本身是学习WP开发的,因此在这里稍微入门的介绍一点WP的知识. 一.简介 Windows Phone具有桌面定制.图标拖拽.滑动控制等一系列前卫的操作体验.其主屏幕通过提供类似仪表盘的体验来显示新的电子邮件.短信.未接来电.日历约会等,让人们对重要信息保持时刻更新.它还包括一个增强的触摸屏界面,更方便手指操作;以及一个最新版本的IE Mobile浏览器——该浏览器在一项由微软赞助的第三方调查研究中,和参与调研的其它浏览器和手机

在之前的博客中提到过看到html5 的websocket后很感兴趣,终于可以摆脱长轮询(websocket之前的实现方式可以看看Developer Works上的一篇文章,有简单提到,同时也说了websocket基本概念)等方式做一个山寨版的web聊天室. 什么是websocket WebSocket 协议是html5引入的一种新的协议,其目的在于实现了浏览器与服务器全双工通信.看了上面链接的同学肯定对过去怎么低效率高消耗(轮询或comet)的做此事已经有所了解了,而在websocket API

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进行下载. 2.准备项目模板文件夹 接下来,我们为第一个项目创建一个文件夹以及一些基本的文件.谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去. 2.1 下载H5BP 访问网站链接地址:https://html5boiler

通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android) <script type="text/javascript"> <!-- //平台.设备和操作系统 var system = { win: false, mac: false, xll: false, ipad:false }; //检测平台 var p = navi