Coursera 布局调整脚本

2024-09-27 15:20

1. 当前 Coursera 的页面布局问题

经常在 Coursera 上课的同学知道，页面中可以打开完整的字幕文本，视频和文本是上下排列的。

image alt

当你向下滚动查看文本时，视频区域会缩得非常小，想既看视频又看字幕文本就很不方便。同时屏幕两侧的宽度都被浪费了。

image alt

2. 如何改进页面布局

我写了一段 JavaScript 脚本，能够将原有的上下布局调整为左右布局：

image alt

视频和文本区域并排显示，屏幕宽度得到充分利用。视频区域保持了一个合适的尺寸，不会因为滚动文本而变小。文本区域可以完整地显示更多内容，避免频繁滚动。

3. 如何使用这个脚本

脚本代码如下：

videoContainer = document.getElementById("main-container");
videoContainer.style.width = "50%";

parentDiv = videoContainer.parentElement;
t = parentDiv.offsetTop;
h = parentDiv.offsetHeight;
parentDiv.style.position = "absolute";
parentDiv.style.top = t + "px";
parentDiv.style.height = h + "px";

scriptNewContainer = document.createElement("div");
scriptNewContainer.id = "new-script";
scriptNewContainer.style.height = h + "px";
scriptNewContainer.style.overflow = "scroll";

scriptDiv = document.getElementsByClassName("cds-1 css-arowdh cds-3 cds-grid-item cds-48 cds-73")[0];
scriptContainer = scriptDiv.parentElement;

scriptContainer.removeChild(scriptDiv);
scriptNewContainer.appendChild(scriptDiv);

parentDiv.appendChild(scriptNewContainer);

使用方法：

  1. 打开 浏览器开发者控制台（通常可以通过按下 F12 或 Ctrl+Shift+I 来打开）。
  2. 将提供的 JavaScript 代码粘贴到控制台中。
  3. 按下 Enter 键执行代码即可。

（建了一个小repo，今后会添加更多类似的提升各个网站浏览体验的小脚本。）

List