一般浏览器先加载主页，再请求关联的js脚本文件不管你把js代码嵌入在html中，还是独立保存为一个文件，都必须等待主页加载完成，js代码加载完成后才能执行网上有人说把js代码放在head里面，其实这样并不影响脚本执行时机因为js或html还没有加载，何谈执行js代码先看一下页面加载资源的顺序，下面我们就来聊聊关于js能否控制浏览器?接下来我们就一起去了解一下吧!

js能否控制浏览器（通过浏览器打开页面时执行js脚本）

js能否控制浏览器

一般浏览器先加载主页，再请求关联的js脚本文件。不管你把js代码嵌入在html中，还是独立保存为一个文件，都必须等待主页加载完成，js代码加载完成后才能执行。网上有人说把js代码放在head里面，其实这样并不影响脚本执行时机。因为js或html还没有加载，何谈执行js代码。先看一下页面加载资源的顺序

浏览器加载页面资源顺序

再简单分析一下onload事件的执行时机。Document.onload它是在结构和样式加载完才执行js。【就是在html和css都完事以后才执行】Window.onload它不仅仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文件，全部加载完才会触发window.onload事件。jquery中的ready指定在DOM完全加载时要执行的函数。 也许你又会想到，先执行JavaScript，再打开页面可以吗？答案是否定的，因为执行完JavaScript后，执行结果保存在变量中，当打开一个新的页面时，js变量会被清空。 有什么方法在页面加载前就执行js代码呢，单从网页来考虑似乎无解，那就需要从浏览器端入手。当输入网址或点击链接导致需要加载另一个页面前就执行js代码（注意只是准备加载页面，还没有下载一个字符）。这样做可以在页面加载前先给某些变量赋值，且这个变量值在页面加载完成后不会消失。 打开木头浏览器的项目管理窗口，创建一个脚本代码步骤，并输入需要执行的JavaScript代码，选择代码执行时机为“页面加载前执行”，保存这个项目后，只要执行一次这个项目（点击测试也可以），在浏览器中打开任何网址时，都会先执行这段JavaScript代码。如下图所示，为方便体验具体效果，设置一个弹窗代码在页面加载前执行。

加载页面前执行脚本

然后在浏览器中输入打开一个网址，此时页面还没有加载，就弹出了窗口。由于是模态弹窗，只有点击确定后才会继续加载页面内容。页面加载完成后，js变量值亦不会丢失。

执行时机测试

如果需要停止在页面加载前执行脚本代码，只需要再添加一个脚本代码步骤，代码为空，设置执行时机为“停止加载前执行”。当此步骤执行一次后，在浏览器打开网页就不会再执行脚本代码弹出窗口了。

停止加载前执行脚本

网页加载前注入执行JavaScript脚本，具体有什么作用呢？可以用于改变系统环境参数，比如修改屏幕分辨率；执行如下代码后，网页获取分辨率时将得到预设值而非实际分辨率。

  1. screen.width = 1024;

  2. screen.height = 768;

  3. screen.availWidth = 1024;

  4. screen.availHeight =768;

  5. screen.availablewidth =1024;

  6. screen.availableheight =768;

还可以修改系统函数，替换函数功能。比如把下面这段代码放在页面加载前执行，改变系统的alert函数功能，那么此页面再执行alert就不会弹出窗口了。

  1. window.alert=function(txt){

  2. return txt;

  3. }

某些网站通过JavaScript功能函数采集“浏览器指纹”，同样可以通过修改功能函数，避免被网站跟踪。比如在页面加载前执行以下代码，自动给canvas画布指纹添加变化的噪声，导致页面每次获取的“浏览器指纹”都不一样。

  1. var inject = function () {

  2. const toBlob = HTMLCanvasElement.prototype.toBlob;

  3. const toDataURL = HTMLCanvasElement.prototype.toDataURL;

  4. const getImageData = CanvasRenderingContext2D.prototype.getImageData;

  5. //

  6. var noisify = function (canvas, context) {

  7. if (context) {

  8. const shift = {

  9. 'r': Math.floor(Math.random() * 10) - 5,

  10. 'g': Math.floor(Math.random() * 10) - 5,

  11. 'b': Math.floor(Math.random() * 10) - 5,

  12. 'a': Math.floor(Math.random() * 10) - 5

  13. };

  14. //

  15. const width = canvas.width;

  16. const height = canvas.height;

  17. if (width && height) {

  18. const imageData = getImageData.apply(context, [0, 0, width, height]);

  19. for (let i = 0; i < height; i ) {

  20. for (let j = 0; j < width; j ) {

  21. const n = ((i * (width * 4)) (j * 4));

  22. imageData.data[n 0] = imageData.data[n 0] shift.r;

  23. imageData.data[n 1] = imageData.data[n 1] shift.g;

  24. imageData.data[n 2] = imageData.data[n 2] shift.b;

  25. imageData.data[n 3] = imageData.data[n 3] shift.a;

  26. }

  27. }

  28. //

  29. window.top.postMessage("canvas-fingerprint-defender-alert", '*');

  30. context.putImageData(imageData, 0, 0);

  31. }

  32. }

  33. };

  34. //

  35. Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {

  36. "value": function () {

  37. noisify(this, this.getContext("2d"));

  38. return toBlob.apply(this, arguments);

  39. }

  40. });

  41. //

  42. Object.defineProperty(HTMLCanvasElement.prototype, "toDataURL", {

  43. "value": function () {

  44. noisify(this, this.getContext("2d"));

  45. return toDataURL.apply(this, arguments);

  46. }

  47. });

  48. //

  49. Object.defineProperty(CanvasRenderingContext2D.prototype, "getImageData", {

  50. "value": function () {

  51. noisify(this.canvas, this);

  52. return getImageData.apply(this, arguments);

  53. }

  54. });

  55. //

  56. document.documentElement.dataset.cbscriptallow = true;

  57. };

  58. inject();