判断浏览器版本,当浏览器版本过低时提示升级浏览器,不显示原来页面内容

在新做的pc端项目中,涉及到了浏览器兼容性的问题,由于ie8不支持一些js方法或属性以及样式错乱问题太大,所以我只兼容到了ie9,想在用户ie8及以下版本访问网站时给出提示,并且不显示原来页面内容。

写这块的时候遇到了很多问题,接下来我一个一个的描述一下,我也是被我自己的蠢惊到哭泣,笑到哭泣。

1.想使用window.write()来重写页面,但window.wirte()一般情况下是在页面加载时向页面中追加内容,想要覆盖原来内容,就要写在页面加载完成后。因为页面加载完成时浏览器会自动打开输入流,页面自上而下加载,当加载完毕后,输入流自动关闭,而document.wirte()会重新打开一个新的输入流,它将清除当前页面内容(包括源文档的任何变量或值)。显示

2.此步完成后,当ie版本过低时确实可以实现页面重写,但当我切换ie版本或刷新后并不能显示版本高时应该显示的正常的页面,神坑来了,对,这个神坑就是我自己!我以为是window.onload的问题,我以为刷新页面不能执行window.onload事件,或者是切换版本并不能实现页面刷新,后来经过我的测试,发现切换版本能实现页面刷新,页面刷新也可以再次执行window.onload事件,因为浏览器网页加载的过程是:解析页面生成DOM树,遇到css标签或JS脚本标签就新起线程去下载他们,并继续构建DOM。下载完后解析CSS为CSS规则树,浏览器结合CSS规则树和DOM树生成Render Tree。(详情请见知乎回答:https://www.zhihu.com/question/30218438 )但window.onload事件是在页面或图像加载完成后立即发生,而在页面刷新机制也是重新加载html css js 文件(详情请见http://bbs.51cto.com/thread-941693-1.html)刷新页面当然也会重新触发window.onload事件,所以问题并不出现在window.onload事件中。

3.但是我很纠结,明明我都有判断浏览器版本了,为什么还是会重写页面呢。然后我就开始想啊想,不停刷新页面,在审查元素中观察到,页面的elements元素一直是我重写的页面,所以问题就出现在这里了!并不是我每次刷新都重写了页面,而是我刷新的一直是我重写后的页面!无论怎样刷新,怎样切换浏览器版本,页面现在已经是我重写过的了!自然不会实现切换到正常页面!所以此方法不可行!

4. 解决方法:

最后我想的办法是,还是使用document.write()添加内容到当前页面中,当浏览器版本过低时给页面加一个遮罩层,宽高都为html的宽高,就可以把原来要显示的(问题)内容覆盖掉了

关键代码:


document.write("

请使用高版本IE浏览器或者谷歌浏览器!
ie浏览器推荐下载地址:http://rj.baidu.com/soft/detail/14917.html?ald
谷歌浏览器推荐下载地址:
http://rj.baidu.com/soft/detail/14744.html?ald
")


提示:1.此处应为加的遮罩层加position:fixed;固定它的位置和html的位置是一样的,才会实现覆盖,因为如果使用absolute,浏览器兼容问题导致的内容宽度过大而不能完全覆盖.

2.此处document.write应该注意wirte()写入的内容不应有空行,而且双引号里的引号一定要是单引号

最终效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容