最近在做一个很奇葩的需求。要需要判断内外网环境。展示不同的页面内容。由于在方案上后端通过ip判断存在某种不可抵抗的因素。无法成功。
所以出了一个替代方案。后端提供一个仅内网可访问的jsonp接口。该接口无任何逻辑,在内网环境下直接返回200.在外网环境下肯定会出现超时.通过超时时间来判断内外网环境。
正常内网可下很正常,但是在外网环境下,由于请求一直在pending.虽然我通过请求超时时间设置500ms,逻辑已处理。但是此时jsonp请求并没有终止。使得页面titile一直在转圈等待。这对用户体验很不友好。而且毕竟我们网站主要是对外的用户。
这里为了解决这个问题,核心问题成了如何中止已发出的jsonp请求,在上一篇中提到过,无法使用ajax的abort()方法。
后来同事建议使用window.stop()方法。但是该方法会使得页面所有的请求都会停止。到此感觉自己已经在坑里爬不起来了,准备换方案时。自己灵光一闪。想到一个巧妙的方法。
我通过一个iframe标签单获得一个独立的子window对象。通过iframe引入页面单独发一个jsonp的请求,在发出500ms后,看是否成功,若还在pending,使用window.stop()方法停止请求。
此时停止的只有iframe的子window对象的请求,不会影响父级window正常的请求。
iframe引入的intranet.html代码如下:
在500ms后判断jsonp返回值是否取到,再通知页面内容。如果intranet.html与当前页面是同一个项目(即iframe的src地址不存在跨越)。可以通过postMessage形式。
window.parent.postMessage({retCode:200, msg:'iframe success ...'});将消息传递给外层window对象
在外层通过window.addEventListener("message", receiveMessage, false);获取通知信息。
由于我修改的部分是多个项目的公共部分。所以存在跨越的问题(二级域名不同。具有相同的一级域名)。所以我采用cookie的形式。
超时请求截图如下:status:canceled