首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

编写兼容性JS代码

前文介绍了:  1 DOM四个常用的方法   2 使用DOM核心方法完成属性填充 本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与javascript的耦合使用java进行onclick...但是在编写合格的javascript代码时,需要注意:   1 平稳退化:保证在不支持js或者低版本的浏览器也能正常访问   2 分离javascript:把html与javascript分离,有助于后期代码的维护...  3 向后兼容性:确定老版本的浏览器不会因为脚本禁止而死掉   4 性能考虑:确定脚本执行的最优   编写优化的代码   针对前一篇中的相册的代码,这里主要修改的地方是把onclick方法删除,在页面加载时...return true; } addLoadEvent(prepareGallery);   上面部分的代码,添加了很多的安全性检查和兼容性

3.2K90
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何解决小程序的兼容性问题?

    文 | kamidox 微信小程序发布有一段时间了,但目前小程序的兼容性问题,特别是 Android 平台兼容性问题,特别严重。据我观察,好多小程序都曾踩过兼容性的坑。...微信小程序的兼容性问题除了微信本身的 Bug 外,大部分是目标平台对 JavaScript 标准库支持程度不同造成的。...特别是 Android 平台版本众多,兼容性问题就更严重,可能一不小小心就掉到坑里。 如何避开这些坑? 微信本身 Bug 只能绕过去,但对 JavaScript 引擎的兼容性,我们有更优雅的解决方法。...使用方法很简单,把 minapp-polyfill 项目里的 polyfill.js 拷贝到小程序源码目录下,然后在需要打补丁的 JavaScript 源文件头部引入如下代码即可: import 'path.../to/polyfill.js' 目前这个项目只是搭了个骨架,还有很多方法需要实现。

    1.2K20

    【兼容性】H5滚动穿透解决方案

    小东西快快学快快记,大知识按计划学,不拖延 滚动穿透相信大家平常开发的时候也经常遇到,网上也有很多解决办法 今天我就谈下我对 滚动穿透的理解 和 总结下我们大佬写的一个比较完美的解决方案 不废话,本文分为...3部分 1、什么是滚动穿透 2、为什么会滚动穿透 3、怎么解决滚动穿透 4、碰到的问题 什么是滚动穿透 大家肯定不陌生了,做移动端开发的,肯定都碰到过,比如 我明明滚动的是弹窗,但是底下的 document...尽可能响应,滚动一切当前操作可以滚动的元素 只是当把元素设置了 fixed 之后让人感觉是个bug,浏览器没有必要对 fixed 元素做特殊处理,两个不相关的东西,不可能耦合起来 怎么解决滚动穿透 我们理解了滚动穿透的原因之后...,但是直接给 html 设置 absolute 风险太大,容易埋坑,不太建议大项目使用,小应用还是可以的,我在需求的小活动页7就使用过这种方式 5禁用页面滚动 除了在 css 限制页面滚动,还可以从 js

    6.2K20

    常见的兼容性问题解决「建议收藏」

    所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。...这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。...碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是...这时候我们就会面临这个兼容性问题。...建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。

    1.2K20

    利用HSTS安全协议柔性解决全站HTTPS的兼容性问题

    主要目的是为了解决 HTTPS 网站首次请求时使用的是未加密的 HTTP 协议,也就说用户一般访问我们的网站都是直接在浏览器输入域名,比如 zhangge.net,然后我们的服务器检测到是 HTTP 请求...在我看来,HSTS 还有另外一层好处:增强网站的兼容性。...而不支持 HSTS 的浏览器访问我们的网站,则不会产生跳转,从而提高了兼容性。这个机制对于不支持 HTTPS 的搜索引擎来说是非常友好的做法了!...以上代码只会替换和网站主域名有关系的超链接,八竿子打不着的外部超链接就不管了,有需求自行参考解决。...从而解决前半程为 HTTP 的问题(不专业,但说人话。。。)。

    79060

    微信 H5 页面兼容性解决方案

    最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。...(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从input的顶端到文字的底部 解决办法:高度height和行高line-height...【有待考证】 解决办法:只需要在公共样式加入下面这行代码 *{ -webkit-overflow-scrolling: touch; } But,这个属性是有bug的,比如如果你的页面中有设置了绝对定位的节点...出现原因分析:待补充 解决办法:给input和textarea标签添加focus事件,如下,先判断是不是安卓手机下的操作,当然,可以不用判断机型,Document 对象属性和方法,setTimeout延时...会导致刚提交的代码(特别是js)效果要半个小时左右才生效。

    3.3K30

    4种方案解决CSS浏览器兼容性问题

    CSS浏览器兼容性问题的解决思路和方案 今天,不想去关注太多细节问题, 比如那个css样式需要我们去兼容,而是想讨论一下大的解决思路,主要包括4个方面,浏览器CSS样式初始化、浏览器私有属性,CSS hack...{ border-style: none; /* Remove the border on images inside links in IE 10. */ } 通过CSS样式初始化,相信能解决不少常规的兼容性问题...src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> <!...IE6 and earlier */ * + html .test { color: #ff0; } /* For IE7 */ 看到这里,我不得不为前端人员自豪,这也太难了吧 不过花大力气解决这些兼容性问题..., 并不能给我们技术上带来什么大的提升,无非是给各个浏览器厂商填坑罢了,随着时间的流逝,这些技术的价值也会越来越小,怎么花最小的力气解决css兼容性问题,让我们把更多的时间留给美好的生活,才是关键,好在有一些自动化插件可以帮我们从繁重的兼容性处理中解脱处理

    2.9K10

    ChromeEdgeFirefoxSafari 决定合力解决 Web 兼容性问题 !

    oschina2013) 浏览器制造商 Apple、Google、Microsoft 和 Mozilla ,以及软件公司 Bocoup 和 Igalia 正在合力制定一项名为 Interop 2022 的 Web 兼容性规范...这是有史以来第一次,所有市场上主要的浏览器供应商和利益相关者齐心协力地解决浏览器兼容性问题。...此前,互相为竞争关系的浏览器厂商常常在 Web 技术的兼容性上出现分歧,尤其是 IE 还活着的时候,前端一个页面三套代码的情况十分常见。...Scrolling (滚动控件) 这条是关于页面滚动的兼容性,Scroll snap 提供了控制界面滚动方式和内容显示方式的工具。...(Web 兼容) 浏览器中的特定错误可能不导致某些网站无法按预期渲染,或者一个浏览器可能与 Web 标准不同,从而导致网站或 Web 应用程序用户的体验,Interop 2022 旨在通过 Web 兼容性测量来捕获和解决这些问题

    2.3K20

    利用 HSTS 安全协议柔性解决全站 HTTPS 的兼容性问题

    主要目的是为了解决HTTPS网站首次请求时使用的是未加密的HTTP协议,也就说用户一般访问我们的网站都是直接在浏览器输入域名,比如 zhangge.net,然后我们的服务器检测到是HTTP请求,就301...在我看来,HSTS还有另外一层好处:增强网站的兼容性。...支持这个协议的浏览器会自动跳转到HTTPS页面,返回码为307:[1495003529165_7628_1495003528912.png] 而不支持HSTS的浏览器访问我们的网站,则不会产生跳转,从而提高了兼容性...以上代码只会替换和网站主域名有关系的超链接,八竿子打不着的外部超链接就不管了,有需求自行参考解决。...从而解决前半程为HTTP的问题(不专业,但说人话。。。)。

    2.1K00
    领券