Javascript

分类下相关文章

页面禁止复制和右键菜单的应对方法

有时候从网上搜集资料,会发现一些网站禁用了复制和右键菜单功能。 首先明白一点,禁用功能是用 JS 实现的。 如果仅仅保存 HTML 还是不能解决,就需要检查是不是 JS 禁用代码是不是写在了 HTML 文件内。 解决方法 Ctrl + S 保存当前网页,选择仅保存 HTML。 使用记事本打开保存的 HTML,删除 body 标签内的其余部分,仅仅保留 body。保存。 使用 Chrome 打开该 HTML,即可复制内容。 代码示例 <body id="products_detail" onmouseup="document.selection.empt ...

阅读全文...

DevTools failed to parse SourceMap

最近用 Chrome 浏览器调试网站前端代码时,总是看到 Console 里报错: DevTools failed to parse SourceMap: some-domain/js/maps/swiper.min.js.map SourceMap 是什么 通常网站加载的 JS 会做压缩处理,以节省带宽。但是这样处理之后,JS 代码通常变成了一行,在报错时,无法看到错误的准确定位。而 Source Map 就是为了解决这个问题。 Source map 可以看成一个映射表,存储了转换后的代码所对应的转换前的位置。 这样,JS 报错的时候,Chrome Console 里就能直接显示原始代码 ...

阅读全文...

jQuery 实现点击按钮缓慢地滑向页内目标锚点

默认的页内跳转效果太突兀,感觉还是慢慢地滑动比较直观,容易理解 $('.btn').click(function(e){ e.preventDefault(); var jumpId = $(this).attr('href'); $('body, html').animate({scrollTop: $(jumpId).offset().top}, 'slow'); }); ...

阅读全文...

javascript 将英文标题中每个单词首字母大写

我的英文博客大部分内容来自我中文博客的翻译,为了节省时间,我想将翻译好的英文博客标题自动格式化,即,英文标题中每个单词首字母转换为大写。 javascript 实现代码: function format_en_title(title) { var words = title.trim().toLowerCase().split(' '); var ignore_words = ["of", "to", "the", "in"]; for (var i = 0; i < words.l ...

阅读全文...

Google 分析实现跨域名统计

有些场景下,需要将多个不同的域名放到同一个 Google 分析的媒体资源下,这样所有流量就能在统一的视图下查看。举个例子: 推广/引流类的网站域名是 www.a.com 及 www.b.com 在线下单购买的网站域名是 www.c.com 用户可能先搜索到了 www.a.com 里的内容,然后产生了购买欲望,然后跳转到 www.c.com 进行下单。要监控 a.com 到 c.com 的访问路径,及转化率,就需要将这三个域名放到一个媒体资源下。 示例代码 <!-- Global site tag (gtag.js) - Google Analytics --> <scri ...

阅读全文...

百度统计事件分析对出站链接进行统计

我有一些对出站链接点击情况进行统计的需求,例如: 阿里云大使链接的访问量。 京东联盟返利链接的点击情况。 这些都需要统计页面的 URL,及点击量。我好根据统计数据来判断具体页面的转化率是否符合预期。 之前只用过百度统计的自定义上报功能,但是不知道如何跟踪出站链接。 百度统计官方文档中的例子 https://tongji.baidu.com/web/help/article?id=236&type=0 对当前页面的客户端下载链接进行点击事件统计,具体示例代码如下: <a id="download" onclick="_hmt.push(['_tra ...

阅读全文...

360 度展示产品 js 实现

图片放哪里 放服务器上的话,太占项目仓库空间。还是放到阿里云 OSS CDN 里吧。 这样就需要使用文件列表。需要注意的是,即使使用 data-image-list,也依然需要指定 data-folder。 data-folder="https://scaleflex.airstore.io/demo/360-car/" data-image-list='[ "iris-1.jpeg", "iris-4.jpeg", "https://scaleflex.airstore.io/demo/360-car/i ...

阅读全文...

百度编辑器 UEditor 设置支持上传的图片格式

今天在网站管理后台使用百度编辑器 UEditor 上传图片时,发现不支持 .jpeg 格式的图片,上传之后,提升“文件格式不支持”。 感觉应该是百度编辑器的配置问题,于是搜索了一下 imageAllowFiles,在 config.json 文件中找到配置。 增加 .jpeg 即可。 "imageAllowFiles": [".png",".jpg",".gif",".jpeg"], /* 上传图片格式显示 */ ...

阅读全文...

百度编辑器 UEditor 限制高度

文章内容太长的情况下,如果不限制编辑器的高度,会导致要下拉很久才能点击到保存按钮。 如果可以设置编辑器的高度,即使文章再长,也可以在编辑器内部下拉滚动条,而不会影响网页的高度。 百度编辑器 UEditor 的设置方法: var ue = UE.getEditor('container'); ue.ready(function() { this.setContent('xxx'); this.setHeight(500); }) ...

阅读全文...

使用 JS 修改提交按钮的处理状态

代码 $('#email_submit').prop('disabled', true); $('#email_submit').attr('style', 'background: grey !important'); $('*').css('cursor', 'progress'); $('#email_submit').prop('disabled', false); $('#email_submit').attr('style', 'background: #e40013 !important'); $('*').css('cursor', 'default'); 修改鼠标样式为“ ...

阅读全文...

Uncaught SyntaxError: await is only valid in async function

在使用 sweet alert 组件时,遇到一个错误提示: Uncaught SyntaxError: await is only valid in async function function edit_dis_top(user_id) { const {value: formValues} = await Swal.fire({ title: '设置推荐人', // ... }) if (formValues) { Swal.fire(JSON.stringify(formValues)) } } 这让我想起了 C# 的 awa ...

阅读全文...

使用 Babel 将 ES6 转成 ES5 代码

Laravel 内置的 Mix 太过臃肿了,我本身又非常反感 JS NPM 这种低质量代码的包管理方式,所以能少一点 JS 依赖就尽量少一点。所以,我直接抛弃了 Laravel Mix。而且,Laravel Mix 在 Windows WSL 中非常不稳定,安装都会报错,问题颇多,并不想研究。 最终,我决定使用简单的 Babel 替换掉 Laravel Mix,因为我实际上只需要 ES6 转成 ES5 这一个功能。 Babel 的文档写的真好 解释了 ES 2015 有哪些新特性 Babel 的配置文件 可以在三个地方配置 Babel babel.config.js .babelrc p ...

阅读全文...

使用 fetch 替代 ajax

前一段时间看到条消息 bootstrap 5 将移除对 jquery 的依赖。例如: 用 querySelectorAll 来查询 DOM 节点 使用 fetch 代替 ajax(在不支持的浏览器上使用 XHR) 使用代理事件来进行事件处理 为一些尚未实现的 DOM 标准写了 polyfill 更多地使用自定义元素 (CustomElement) 我完全理解 bootstrap 这样做的初衷,因为写一个简单的小功能,例如调用服务端接口,就需要引入庞大的 jquery 依赖,实际上是非常不合理的。 所以,我决定在新项目中都采用相同的做法,使用 fetch 替代 ajax。 fetch 如何替 ...

阅读全文...

innerHTML, innerText, TextContent 的区别

测试用的 HTML 代码 <div class="quoteText"> “Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.” <br> ― <span class="authorOrTitle"> Albert Einstein </span> </div> innerHTML document.querySelect ...

阅读全文...

返璞归真:使用纯粹的 javascript 替换掉 jQuery

为何要替换掉 jQuery 一个简单的 element 选择,为何要引入一个 jQuery 依赖? 我想尝试一下摆脱 jQuery 的依赖 Vuejs 中使用 jQuery 总感觉怪怪的 为何 jQuery 可以被替换掉 使用 jQuery 有一个很大的历史原因,那个年代,多种浏览器需要兼容,而 jQuery 是兼容的最好的。例如,ie6 很多功能函数跟 firefox / chrome 不一致,一行 js 代码就需要不得不多写几行来做兼容。用 jQuery 确实省心。 但是,时代不同了。目前手机浏览器完全没有 ie 的包袱,并且桌面平台 ie8 以下的用户凤毛麟角,甚至可以完全忽略不计。 ...

阅读全文...

近期节日

2020年04月01日 愚人节
2020年04月02日 国际儿童图书日
2020年04月03日 寒食节
2020年04月04日 清明节
2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
查看更多节日