使用谷歌 Chrome 浏览器禁用网页 JavaScript

简介: 避免 Web 弹窗影响正常阅读

I - 概述

1.1 - JavaScript 的功能


Web 中 JavaScript 的主要功能为实现网页的动态,与用户的交互, HTML DOM 节点的增删修改等。
如:

  • 在网页中插入新的 HTML 元素,修改现有的网页内容和样式
  • 响应用户的动作,响应鼠标的点击/移动、键盘的按键事件等
  • 向远程服务器发送网络请求,AJAX 请求,下载/上传文件等
  • 获取或修改 cookie,向访问者提出问题、发送消息等
  • 记住客户端的数据,记住密码等
  • 实现页面的效果更改,动画效果等
  • ....

这些功能保证了一个 Web 页面的正常运行。

1.2 - 为何要禁用 JavaScript


禁用 Web 的 JavaScript 可能出于多种原因:

  • Web 开发人员的一些调试
  • 某些网站会有一些动态弹窗影响阅读,或必须登录才能浏览内容,等等。对正常网页使用造成负担等

如下图示例,打开某个网页后会弹出登录要求,未登录即无法浏览网页内容。但由于网络原因无法成功注册,而且没有相关的 GMAILFB 账户也无法登录,从而导致无法浏览网站内容。

情境.png

II - 禁用 JavaScript 的方式

2.1 - Chrome 调试工具


首先,使用谷歌浏览器 Chrome 打开想要禁用 JavaScript 的网站,进入网页后按下 F12 打开调试工具,此时会从浏览器右侧或下方弹出调试工具。

接着按下 CTRL + SHIFT + P 进入命令输入栏,输入 Disable JavaScript ,然后鼠标点击下方出现的 Debugger Disable JavaScript

调试哦工具.png

如果 JavaScript 禁用成功,则会在浏览器地址栏最右侧出现如下图红框中的标识,将鼠标放置在此标识上则会显示 "已拦截此网页上的 JavaScript" 。

禁用状态.jpg

这时使用浏览器刷新页面,则可不再弹出登录要求的界面。网页即可正常浏览。

再次启用 JavaScript,只需要在以上命令行步骤中输入 Enable JavaScript ,然后点击对应内容即可。甚至不至于这么麻烦,此种方式禁用 JavaScript 只是暂时禁用此 Web 分页的 JavaScript。关闭 Chrome 浏览器重新打开,或者 在新的 Web 分页打开此网页即可看到 JavaScript 被再次启用。

2.2 - Chrome 黑名单


问题的解决方案都不唯一,禁用 Web 网页 JavaScript 的方式也是一样,前一个小节的方法为临时禁用 JavaScript ,当然也可以一劳永逸的禁用所有来自这个域名任何网页上的 JavaScript。

首先在谷歌 Chrome 浏览器右上角找到三个点的按钮,并点击打开 " 设置 (Settings) "

settings.png

展开设置中的高级,选择 "隐私设置和安全性 (Privacy and security) " ,然后点击 "网站设置 控制网站可使用的信息以及可向您显示的内容 (Site settings Controls what information sites can use and show ( location, cameras, pop-ups, and more)) "

在这里插入图片描述

接着在网站设置中找到并点击 "JavaScript 允许 (JavaScript Sites can use JavaScript)"

privacy.png

或关闭允许 JavaScript。或者指定部分网站不允许使用:

add.png

点击 "禁止 (Not allowed to use JavaScript)" 的 "添加 (Add)" 按钮,输入网站的主域名,如对于以下域名

https://www.xxxx.org/dfadfas-sdfas

只需要输入

https://www.xxxx.org

点击 "添加 (Add)",即禁用了所有来自此域名的所有网页上的 JavaScript。

同样,为了还原,再次启用本网站的 JavaScript 只需要在此处删除此网站域名即可。

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
8天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
14 0
|
12天前
|
JavaScript 前端开发
JavaScript如何获得浏览器的宽高
JavaScript如何获得浏览器的宽高
|
13天前
|
JavaScript 前端开发
js如何获得浏览器的宽高
js如何获得浏览器的宽高
19 5
|
15天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
15 4
|
15天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何检测浏览器是否支持某个特性?
【4月更文挑战第15天】使用Modernizr库检测浏览器特性:添加 `<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>` 到HTML,然后通过 `Modernizr.localstorage` 进行检测,如支持localStorage则执行相应代码,否则执行备用逻辑。
14 0
|
18天前
|
Web App开发 数据安全/隐私保护 Windows
【Windows】谷歌翻译停服后,chrome无法自动翻译?解决办法来了~ (最新)
【Windows】谷歌翻译停服后,chrome无法自动翻译?解决办法来了~ (最新)
59 0
|
18天前
|
Web App开发 定位技术 Windows
【Windows】 谷歌翻译停服后,chrome无法自动翻译?解决办法来了~
【Windows】 谷歌翻译停服后,chrome无法自动翻译?解决办法来了~
46 3
|
22天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
Web App开发 前端开发
《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.6 实战演练——创建基本文本网页
本节书摘来自异步社区《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》一书中的第3章,第3.6节,作者:何新起 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1648 0