• 巧妙利用图片IMG的onerror事件


    巧妙利用图片IMG的onerror事件,对付网通电信的南北分家
     背景:
    我国电信网通南北分家已经成为了一种不可改变的现状,做网站的朋友都知道,如果想让南北方地朋友们都能够顺利地访问我们的网站,需要买双线服务器,就是既通网通用户又通电信用户的线路,尽管如此有的机房在提供双线服务器的时候会提供两个IP地址(网通和电信分别有一个IP);这时候我们就需要在域名映射的时候映射一个电信地址,一个网通地址,例如:dianxin.xxx.com;wangtong.xxx.com;可是用户访问的时候总是希望访问www.xxx.com,就是说我们需要在用户访问www.xxx.com  的时候智能的判断出用户在北方还是在南方,然后进行跳转。

    思路:
    我们在www.xxx.com 中让客户端同时向地址dianxin.xxx.com和wangtong.xxx.com发出一个错误的请求,哪一个地址返回错误的响应速度快就说明用户应该访问那个地址。

    关键代码:
    <img src="http://dianxin.xxx.com/NotExistsUrl" width="1" height="1"
       onerror="location.top.url='http://dianxin.xxx.com/'"/>
    <img src="http://wangtong.xxx.com/NotExistsUrl"  width="1" height="1"
       onerror="location.top.url='http://wangtong.xxx.com/'"/>

    为了在用户下次访问的时候可以直接跳转到比较快的线路上我们可以将这一次判断的结果保存到cookie中。

    IMG的onerror事件的另一个用武之地:
    我们都不希望用户看到我们网站上面出现无效的图片,即便是出现了无效的图片我们也希望以一种友好的方式告诉用户图片无效,而不是直接给用户看默认的红叉;怎么办,我们可以在图片的onerror事件中将图片的src属性设置为我们网站上已存在的表示图片不存在的图片。
    代码示例:
    <img src="http://www.xxx.com/someImage.gif"
       onerror="this.src='http://www.xxx.com/invlid.gif'"/>

  • 相关阅读:
    Mac下持续集成-查看占用的端口及kill
    windons模拟linux终端工具----cmder
    windows中使用django时报错:A server error occurred. Please contact the administrator.
    Pycharm和Navicat免费全功能版资源(即破解版)
    git常用命令
    pycharm常用的快捷键
    CSS3的媒体查询
    CSS列表中与list-style=none等价的样式
    CSS3中的mouse事件(mouseleave,mouseenter,mouseout,mouseover)
    CSS层级(浮动,定位的层级提升)
  • 原文地址:https://www.cnblogs.com/zzx/p/1448721.html
Copyright © 2020-2023  润新知