巧妙利用图片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'"/>
说明:
关于南北分家的解决方案有很多种,本文只是为大家提供一种思路。
我国电信网通南北分家已经成为了一种不可改变的现状,做网站的朋友都知道,如果想让南北方地朋友们都能够顺利地访问我们的网站,需要买双线服务器,就是既通网通用户又通电信用户的线路,尽管如此有的机房在提供双线服务器的时候会提供两个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'"/>
说明:
关于南北分家的解决方案有很多种,本文只是为大家提供一种思路。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架