Saber 酱的抱枕

Fly me to the moon

12/2
2015
学习

网站屏蔽国内访问的办法

之前有篇文章:《屏蔽北京地区对网站的访问》,用的是判断ip归属地的方法。现在又有个网站要屏蔽国内访问。新浪的这个api返回了国家或地区的名称,不妨一试。

<script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" type="text/ecmascript"></script>
<script type="text/javascript">
	var country=remote_ip_info["country"];
	if(country=="中国"){
		// do someting
	 }
 </script>

另外有个“邪门”的办法:判断浏览器语言。

if ((navigator.language || navigator.browserLanguage).toLowerCase()=="zh-cn") {
  newwin = window.open("","_parent","");  
  newwin.close(); 
  location.href="http://404";
};

如果浏览器语言设置是zh-cn,百分之九十九是中国的,然后就看你怎么做了。

这段代码里有四个兼容性处理的地方。一是获取浏览器语言设置(IE6、7、8不支持navigator.language);二是将语言设置转换为小写(大多数浏览器都是zh-CN,但ie8是全小写的);三是大括号内的代码,关闭当前页面(如果直接用window.close()的话ie7和8会弹出个对话框询问你是否同意关闭页面)(IE爆炸吧!)。最后一句姑且算是兼容性处理,因为在手机浏览器上无法用js关闭页面,只好跳转到一个错误网址去。
Read More →

网站屏蔽国内访问的办法

11/30
2015
学习 软件

iis网站突然出现401.1错误的解决办法

服务器上的某个网站,好端端的忽然就401错误了:

HTTP 错误 401.1 - 未经授权:访问由于凭据无效被拒绝。

我们要注意到,这里的重点是凭据而非权限。

查找了不少资料,总结了最靠谱的排查和解决办法如下:

1.到IIS中查看“目录安全性”中使用的匿名账户。

iis 401.1错误 解决办法
Read More →

iis网站突然出现401.1错误的解决办法

11/28
2015
学习 软件

Adblock Plus拦截广告的“误杀”

昨天快下班的时候,经理走过来,拿着他的爱疯6对我说道:下午上线的手机站怎么有些地方很空?我拿过手机一看,有些地方的背景图片没有显示出来……

这个问题在网站上线之前我就在电脑上发现过,可是我没去解决。为什么?因为我感觉这算是特例。

有三张背景图片未显示,查看控制台,发现三个图片都遇到了错误。仔细看看还不是404错误,而是net::ERR_BLOCKED_BY_CLIENT:对服务器的请求已遭到某个扩展程序的阻止。

以前在某个站上也遇到过这个问题,当时以为是报的404错误,然而图片路径明明没错啊。现在明白了,我用友♂善的眼神看了看右上角的Adblock Plus。果不其然……

滚过来背锅!我图片名写成ad1.jpg、ad2.jpg于是你就当做ad拦截了?那我要是给body加个名为“ad”的class名你敢不敢拦截整个网页?

考虑到这个网站是移动端竞价网站,浏览者只会在手机浏览器上看到,应该不存在这个问题,于是我就没去改。不曾想,爱疯6的浏览器(经理用的应该就是默认的Safari)竟然先进如斯,整合了Adblock Plus的功能甚至代码?

于是把这三张图的名字随便改了下,这个问题就消失了。

ps:同事爱疯4的Safari没有这个现象。当然,他也没升级ios系统,否则就难说了。

Adblock Plus拦截广告的“误杀”

11/5
2015
学习

使用js随机生成密码

今天要把许多网站的密码重新设置,所以自己写了个密码生成器。比较简陋,不过在简单的用途上应该算够用了。


您希望密码中包含哪些内容?

阿拉伯数字(0-9)
大写英文字母(A-Z)
小写英文字母(a-z)
特殊符号(键盘上除了\的所有输入符号)

请设置密码位数:

生成结果:



代码如下:

<p>您希望密码中包含哪些内容?</p>
<input type="checkbox" name="pwType" value="Number"> 阿拉伯数字(0-9)<br>
<input type="checkbox" name="pwType" value="Upper"> 大写英文字母(A-Z)<br>
<input type="checkbox" name="pwType" value="Lower"> 小写英文字母(a-z)<br>
<input type="checkbox" name="pwType" value="Punctuation"> 特殊符号(键盘上除了\的所有输入符号)<br><br>
请设置密码位数:<input type="text" name="pwLength" value="10"><br><br>
生成结果:<input  type="text" name="outputPw" /><br><br>
<button name="createPwButton">生成密码</button>
<script type="text/javascript">
   function createPW () {
       var allPw={
        "Number":"0123456789",
        "Upper":"ABCDEFGHIJKLMNOPQRSTUVWXYZ",
        "Lower":"abcdefghijklmnopqrstuvwxyz",
        "Punctuation":"~!@#$%^&*()_+[]{}|`;:,./?><-="
       }
       var allowPw="";
       for (var i = 0; i < document.getElementsByName("pwType").length; i++) {
           if (document.getElementsByName("pwType")[i].checked) {
                allowPw+=allPw[document.getElementsByName("pwType")[i].value];
           };
       };
       var pwLength=parseInt(document.getElementsByName("pwLength")[0].value,10);
       var pwResult="";
       for (var i = 0; i < pwLength; i++) {
        var nowRandom=parseInt(Math.random()*allowPw.length,10);
            pwResult+=allowPw.substring(nowRandom, nowRandom+1);
        };
        document.getElementsByName("outputPw")[0].value=pwResult;
   }

   document.getElementsByName("createPwButton")[0].onclick=function  () {
       createPW();
   }
</script>

使用js随机生成密码

11/3
2015
学习

修改商务通弹窗元素的尺寸

最近做了两个手机站,美工的设计稿都是640px宽,但是商务通弹窗图片是260px宽,放在页面中显得很小。无奈进行放大。(我很好奇在商务通后台能不能把弹窗尺寸设置得比图片实际宽高大。那样就很省事了。)

商务通弹窗处的主要结构如下:

其中LR_swtbox是控制弹窗图片大小,图片是它的背景图。LR_swtchat和LR_swtchat a是打开咨询窗口的链接,LR_swtColse和LR_swtColse a是关闭弹窗的按钮。

css样式如下:

#LR_swtbox{width:520px !important;height: 310px !important;margin-left: -130px;margin-top: -77px;background-size: 100% !important;}
#LR_swtchat,#LR_swtchat a{width:520px !important;height: 310px !important;}
#LR_swtColse,#LR_swtColse a{width: 70px !important;height: 60px !important;}

Read More →

修改商务通弹窗元素的尺寸

10/11
2015
学习

手机网页上拨打电话的tel链接

在手机网页上拨打电话的链接是tel:链接,形如:

<a href="tel:01088888888"></a>

今天在使用中遇到了一些问题,记录下来:
1.电话号码中间不要加分隔符,如tel:010-88888888是不行的。
2.在某些小米手机自带的浏览器中(也许不是所有miui版本上都这样),电话所在的这个a标签不能有target属性,例如下面的例子会导致错误链接:

<a target="_blank" href="tel:01088888888"></a>

3.iphone上的Safari默认会把电话号码的数字识别为电话号码,此时点击这串数字可拨打电话,同时数字的表现形式变得形同一个a标签。为了防止这个问题,可以加上以下meta信息:

<meta name="format-detection" content="telephone=no" />

评论里提到QQ浏览器了,它有个缺陷。如果你在css中写了句通用的a标签的颜色:

a{color:#fff;}

这是没卵用的,如果你不对一个a标签在css内精准选择它并为其指定颜色,或者没给它在行内样式设置颜色,QQ浏览器就把它显示为紫色,就像电脑上被点击过的链接的颜色一样。很难看。
UC浏览器连rgba颜色都不支持。
ps:又发现了miui自带的浏览器的一个奇葩问题。同事设置某处字体大小的时候,css选择器里面使用了b这个标签,结果在miui自带浏览器上显示的始终是浏览器的最小字号。最后终于发现了这个问题,不使用b标签做选择器,问题解决了。

手机网页上拨打电话的tel链接

10/10
2015
学习

使用jq制作tab选项卡的切换效果

今天做网站要用tab选项卡效果,我写了之后封装成了函数,放上来备用。

<div class="tabtitle clearfix">
    <a href="" class="active">五星服务</a>
    <a href="">医院环境</a>
    <a href="">先进设备</a>
    <a href="">公益活动</a>
</div>
<div class="tabmain">
    <div class="tabmlist">五星服务</div>
    <div class="tabmlist">医院环境</div>
    <div class="tabmlist">先进设备</div>
    <div class="tabmlist">公益活动</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script>
    function setTab (titlist,mainlist,className) {
        titlist.mouseover(function () {
            mainlist.eq(titlist.index(this)).siblings().hide();
            mainlist.eq(titlist.index(this)).show();
            titlist.eq(titlist.index(this)).addClass(className);
            titlist.eq(titlist.index(this)).siblings().removeClass(className);
        });
        mainlist.eq(0).siblings().hide();
        mainlist.eq(0).show();
    }
    setTab($(".tabtitle a"),$(".tabmlist"),"active");
</script>

如果想要不修改而直接使用代码,要注意元素的层级关系,列表的主体部分和标题部分不要处于同一层级。

事件绑定之后,把内容部分先进行了显示隐藏的处理,就是显示第一个,隐藏其余几个。其实如果css设置的好,没必要这么做。

效果图:

jq tab选项卡

我没有做自动切换功能,上图是手动切换。

使用jq制作tab选项卡的切换效果

10/8
2015
学习

原来本站的域名是所谓的国际化域名

本站的域名看上去是这样的:
域名 IDN 国际化域名

实际上是这样的:
域名 IDN 国际化域名
输入网址的时候可以直接输入saber.我爱你,但是实际上,网址是底下那一长串的。解析、ping和一些查询操作都需要使用真实的编码地址。

刚才把IE11回滚到IE8,访问本站的时候地址栏后面有个提示:
域名 IDN 国际化域名

原来这就是所谓的国际化域名(IDN)。那些主域名(而非域名后缀)是中文的网站有哪些,想去看看←_← 可是我找不到

原来本站的域名是所谓的国际化域名

10/8
2015
学习

修改WordPress标签云

刚才看到网站底部的标签云里,最后一行只有两个tag,感觉很不爽,想调整下显示数量,但是在后台没找到选项。于是又是一番百度,找到了方法。

在主题的functions.php中追加对标签云的设置:

//修改标签云
add_filter('widget_tag_cloud_args','style_tags');  
//修改标签云样式
function style_tags($args) {
$args = array(
  'largest'=> '22',
  'smallest'=> '8',
  'format'=> 'flat',
  'number' => '45',//显示数量
  'orderby' => 'count',
  'order' => 'ASC'
);
return $args;
}

你也可以打开wp-includes/category-template.php,修改wp_tag_cloud这个函数,里面也是这些参数,只不过比这更多些。一些参数的意义如下:

smallest – 定义标签的最小字号,默认为 8;
largest – 定义标签的最大字号,默认为 22;
unit – 设置字号类型,如 “pt” 或 “px” 等,默认为 “pt” 类型;
number – 设置标签云数量,默认显示 45 个标签;
orderby – 设置按 “name” 或 “count” 排序,默认为 “name” 方式;(注:orderby=count 表示按照标签使用次数排列)
order – 设置按 “DESC” 或 “ASC” 升降序排列,默认为 “ASC” 升序。

修改WordPress标签云

10/7
2015
学习

css实现position:fixed元素和另一个元素保持固定的距离

标题可能看的有点晕,其实就是说一个div距离页面左侧的位置可能会变动,那如何让fixed定位的元素和它保持固定的距离呢?

看如下代码:

<div class="box">
	<div class="box1"></div>
	<div class="box2">从这里开始是box2的内容部分,左边是内边距</div>
</div>
<style>
	body{margin: 0;}
	.box{width: 810px;margin: 0 auto;}
	.box1{ width:600px; height:2000px; background-color:#3F0;}
	.box2{ width:400px;  height:200px; background-color:#930; position:fixed;top: 0;right: 0;bottom: 0;left: 0;margin: auto;padding-left: 810px;color: #fff;}
</style>

最外层box宽810px,始终水平居中。然后box1宽600px,在外层box里面居左。box2是固定定位position:fixed,想让box2在外层box里面居右,而且和box1有10px的间距。

这时候问题来了,box2是固定定位,而不是相对定位或绝对定位。固定定位是始终相对于窗口定位的,而不是相对于父元素。如果给box2一个固定的left值,窗口宽度一旦改变,外层box距页面的水平位置改变了,box2却保持不变,这就和box1错位了。

然后我去百度,看到有篇文章说的是把固定定位的元素设置居中。我隐约觉得破解这个问题的契机出现了,试了一会儿,终于找到了方法,那就是不使用left定位,而是使用padding或border去挤。

先把fixed定位的元素居中,然后用padding-left或border-left去挤(推荐用用padding-left),其宽度等于外层box的宽度(不能用margin-left,因为它要用来设置居中)。这样,当页面宽度改变时,box2相对于外层box的位置是不变的,也就不会和box1错位了。

但是这样也有缺陷:
第一,fixed的元素因为加了padding或border,实际宽度增加了。如果窗口宽度小于这个宽度,平衡就会被打破。
第二,padding和border都是可见元素,所以fixed定位的元素不要设置背景色和边框,否则在视觉上会影响页面。要设置的话在元素内建立子元素来做。

查看demo

现在想想有点意思,和《绝对定位的元素居中》的方法有相似之处。只不过固定定位的是把元素居中,而绝对定位是把元素左侧居中。然后都是去挤了。

css实现position:fixed元素和另一个元素保持固定的距离