项目地址(欢迎star):https://github.com/Sife-shuo/Sife-shuo.github.io
在线体验地址:Taber
官方插件示例:
是不是感觉效果不错?可以通过看项目文档来学习具体语法。
为了自适应屏幕,Taber默认是更改页面尺寸就刷新,虽然可以适应各种设备,但依然比较影响体验。今天我们来实现一个防止自刷新的插件。
原理
源码中可以看出Taber是检测<body>的onresize属性
将Taber<body>的onresize属性设为空函数
插件编写
有了大体原理,就可以开始写插件了
先写出插件的框架,此插件为脚本插件,没有用户界面,所以是w0h0即没有大小
{
"name": "Change",
"author": "Sife",
"version": "1.0.0",
"size": {
"w0h0": ""
}
}
然后编写JS代码
window.parent.document.body.onresize=()=>{}
最后整合成一个插件
效果
将插件解析成JSON字符串并放入config,导入Taber。
可以看到该插件没有占空间,不影响正常的界面
即使更改窗口,也不会刷新
欢迎各位star Taber.