IceSandwich

超星浏览页面自动放大

超星浏览页面太小了

油猴脚本 js
字数统计: 504阅读时长: 1 min
2020/07/10 Share

需求

这比例实在太小了，非常难看，所以着手使用油猴脚本改掉。

分析

通过开发者工具，了解布局。

首先发现一个mainCon的元素限制了宽度，但是去掉宽度限制后页面内容并没有放大，因此还需要往下探究。

往里面看，发现一个wrap也限制了宽度，将宽度去掉和增加宽度都不会使得内容放大。我们注意到，下面还有个iframe呢，因此还需要往里面看。

我们发现iframe也有限制宽度，同时限制了高度，将宽度设置为100%，高度设置为800px，可以发现内容放大了，宽度解决了，但是ppt显示的高度范围没有改变，滚动条还是不对，因此还需要往里面看。

我们发现，iframe里一个imglook元素限制了高度，把高度设置为100%就行了。至此我们的分析完毕，结果出来了。

虽然页面放大了不少，但是上面的这个横杆有点碍眼，通过观察，发现这个横杆是header部分，把它删掉即可。

由于删掉横杆，ppt大小又不匹配窗口大小了，把上面改的width和height值改一下，结果如下：

这样清爽多了。

代码

新建一个油猴脚本，根据上面分析的内容写入脚本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// ==UserScript==
// @name     超星放大
// @version  1
// @grant    none
// @match		 *://mooc1-1.chaoxing.com/coursedata/toPreview*
// @require  https://mooc1-1.chaoxing.com/js/common/jquery.min.js
// @run-at	 document-end
// ==/UserScript==

(function () {
  var height = "900px";
  
  $(".header").remove()
  $(".wrap").width("100%")
  $(".mainCon").width("1200px")

  var frame = $("iframe");
  frame.width("100%");
  frame.height(height);
  frame.load(function() {
    frame.contents().find(".imglook").height(height);
  });
  console.log("done");

})();

其中需要讲几点：

  1. @require里的地址是从网页源代码里面找来的，目的是在油猴里使用jQuery。
  2. (function () { … })(); 这个就是jq的documentReady事件，需要在页面加载完后调用代码。
  3. 由于imglook元素是在frame里的，所以我们先获取iframe，再改imglook的属性。

原文作者：IceSandwich

原文链接：https://icesandwich.github.io/2020/07/10/%E8%B6%85%E6%98%9F%E6%B5%8F%E8%A7%88%E9%A1%B5%E9%9D%A2%E8%87%AA%E5%8A%A8%E6%94%BE%E5%A4%A7/

发表日期：July 10th 2020, 12:00:00 am

更新日期：July 11th 2020, 3:38:52 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 需求
  2. 2. 分析
  3. 3. 代码
Total : 21
2021
2020
2019
c docker 算法 GTK 三维重建 KinectFusion 稠密重建 MSSQL html gtk opencv cuda BundleFusion 油猴脚本 js esp8266 arduino python torch Premiere FFmpeg 渗透
算法原理 docker GTK 三维重建 gtk BundleFusion 算法 脚本 硬件 研究 FFMPEG 渗透