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

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

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

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

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的宽高,就可以把原来要显示的(问题)内容覆盖掉了

关键代码:

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

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

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

最终效果

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

你可能感兴趣的:(判断浏览器版本,当浏览器版本过低时提示升级浏览器,不显示原来页面内容)