前端

分类下相关文章

网站中嵌入 B 站视频,禁止 iframe 代码中的视频自动播放

在博客网站中嵌入了一段 B 站的视频,代码是从分享功能中获取的 iframe 代码: <iframe src="//player.bilibili.com/player.html?aid=951910057&bvid=BV1zs4y177sv&cid=1078968085&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true&quo ...

阅读全文...

政府大型企业管理后台需要兼容 IE8 情况下的前端技术选型

不得不兼容 IE8 客观来说,我觉得政府和大型企业必须兼容 IE8 确实是不得已的选择。 因为目前主流的浏览器,例如 Chrome,360 浏览器,QQ 浏览器等都存在主动上报用户浏览记录的问题,当然我觉得还会收集其他的用户隐私数据。而这些在政府和企业应用场景下,是绝对不能接受的。 所以,使用 Windows 默认自带的 IE 浏览器就成为了必然。而且,企业内部不需要随意安装软件,所以只支持 Chrome 成了奢望。 昨天去客户那边看了一下,基本都是 Windows 7 自带的 IE8 或者 IE9,少量 Windows 10。没有其他浏览器,所以项目不得不进行前端技术选型。 目前主流的 Vu ...

阅读全文...

summernote 富文本组件去除从其他网页或者 word 复制的内容样式

在做一个题库项目,经常需要从 word 中复制考题到 summernote 文本框中,但是想只粘贴并保留纯文本内容,需要将内容的样式自动去除。例如,字体颜色等。 $editor.summernote({ callbacks: { onPaste: function (e) { var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text'); e.preventDefault(); ...

阅读全文...

form 提交之后,发现 summernote 更新内容没有同步到后台

在解决微信公众号图片保存到小程序后台时,发现用 jquery 替换掉了 summernote note-editor 中的图片地址之后,进行 form 提交,保存到数据库中的仍然是旧的图片地址。 原来 summernote 这里富文本编辑器是将原 textarea 设置为不可见,然后显示了一个自定义的 div 编辑区域。 例如: <textarea name="features" class="form-control summernote" style="display: none;"> <div class=&q ...

阅读全文...

copy 微信公众号文章复制到 summernote, 图片变成了 base64

问题 一个旅行社的客户反馈,从他们微信公众号复制之前的文章,粘贴到微信小程序的后台富文本编辑器 (summernote) 之后,点击保存出错。 从 laravel 日志看,是报了超出字段长度。从以往的经验看,如果使用了 base64 的图片才会有此问题。否则很难超过 text 类型 (TEXT 能存储 6.5 万个字符) 同事测试的时候,发现 如果图片未加载完,复制到 summernote 里的就是 base64 图片 如果图片加载完,复制到 summernote 里的就是图片的 URL 地址 这有点不合逻辑了。 排查 今天,我看看了微信公众号文章的网页代码,发现 <img clas ...

阅读全文...

Mac Safari 远程调试 iOS Safari 上的网页

首先在 ios 的设置里开启 safari 的 web 检查器 然后开启 Mac 上 Safari 的远程调试配置 Safari 设置 Advanced - 勾选 show develop menu in menu bar 用数据线连接 iphone 之后,在 safari 的 develop 菜单里选择对应的设备及网页 在手机上再次尝试上传图片,就能看到对应的错误信息了 Failed to load resource: the server responded with a status of 413 (Request Entity Too Large) 这个图片只有 1.8 M。 ...

阅读全文...

小清晰富文本编辑器 summernote

CKEditor 和 TinyMCE 都是啥大粗!无爱。 几个韩国小哥写的这个 summernote 真是清新脱俗! 语言配置改为中文 https://summernote.org/getting-started/ <script src="lang/summernote-zh-CN.js"></script> $(document).ready(function() { $('#summernote').summernote({ lang: 'zh-CN' // default: 'en-US' }); }); 图片上传改为七牛 ...

阅读全文...

如何禁止百度移动搜索转码

晚上无意中发现自己网站在百度移动搜索里被偷偷转码了,源站页面被劫持到了百度的域名下 transcoder.baidu.com 问题是我的网站是支持手机自适应的,为何还会被转码,而且转码之后,格式都不见了。请允许我在这里向李艳红同志扔一只臭袜子,“你是个榴芒!” Google 了一下,发现无数人遇到了同样的问题,解决方法如下,在 HTML head 里加入 <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache- ...

阅读全文...

使用本地 javascript 文件替换线上代码

Windows 上 Fiddler 是完美的解决方案。 目前,Mac 和 Linux 上还未找到免费又实用的工具。以下是在几个可选方案 NProxy Fiddler 在 Linux/OSX 下的替代品? 如何在 Mac 下使用 Fiddler 参考 使用Fiddler提高前端工作效率 replace some remote javascript file with a local debugging copy using greasemonkey or userscript ...

阅读全文...

优化大象笔记的网页加载速度

检测神器之百度统计、Chrome Audits 百度统计3.0 - 优化分析 - 网站速度诊断功能能分析出指定页面的加载速度。 可以看出 main.css (13KB) 是大头, 耗时 526 毫秒。 按照 Chrome Audits 的建议,可以开启 gzip 以节省下载耗时。 压缩 CSS 文件 每个文件压缩 (使用 gulp) 合并多个 CSS 文件 (使用 gulp) 开启 gzip (使用 nginx) 压缩 main.css 在资源目录 static 下,安装 gulp 以及 gulp-minify-css, gulp-rename sudo npm install --gl ...

阅读全文...

bower

why bower js, css, html 等前端的包管理工具 编写自己的工具集,提交到 github,通过 bower 进行管理 安装 $ npm install -g bower 但是在 Ubuntu 上,会报错 Error: No compatible version found: bower 原因是 nodejs 的版本太低,bower 需要至少 0.8 版本以上的 nodejs 使用场景 使用 bower 下载 jquery bower install jquery 更新 jquery 版本 bower update jquery 搜索 bower search jq ...

阅读全文...

PageSpeed Insights

发现网站前端的问题 PageSpeed Insights 48 分, desktop. 39 分, mobile. Leverage browser caching Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network. Enable compression Compre ...

阅读全文...