Tampermonkey脚本编写笔记一：页面元素及框架分析

我们在编写Tampermonkey脚本时，首先分析页面，定位元素，需要分以下三步：

1、定位元素：通过开发人员工具使用“审查元素”，即可定位到页面中的元素

2、分析元素所在的窗口：分析元素是否在iframe框架（窗口）、甚至多级iframe中

3、获取元素的jquery选择器：根据iframe窗口情况确定出jquery选择器语法。

1、定位元素

要选择出页面的元素，一般右键“审查元素”，根据页面结果就可以选择到，比如

此时在控制台执行：$("div.s_pointti") ，可以看到共57个课程

 注意：控制台中获取元素时，是以当前选中的元素为位置参考的！！  

2、分析元素所在的窗口

如果右键“审查”页面元素时，出现“查看框架的源代码”，该元素肯定在一个iframe框架中！

 控制台使用：

window.self，可以获取该元素所在的窗体，

window.self.frameElement.getAttribute('id')：可以获取所在窗体iframe的id

 判断是否为顶端窗口： 如果window.self.parent==window.top，则说明当前元素在一级iframe中，

window.self        返回当前窗口  

window.opener 或 window.self.opener        返回创建此窗口的窗口，即上级窗口

window.top        返回顶端窗口

window.parent        返回当前窗口的父窗口

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

3、获取元素的jquery选择器

在父窗口中获取iframe中的元素：
jquery方法：
$("#iframe的ID").contents().find("#iframe中的控件ID");
----------------------
js方法：
window.frames["iframe的name或id"].document.getElementById("iframe中控件的ID");
document.getElementById("iframe的name或id").contentWindow.document.getElementById("iframe中控件的ID");

===============================
在iframe中获取父窗口的元素
// JS获取父窗口
var parentWindow = window.parent;
var parentDocument = window.parent.window;
var parentElement = window.parent.document.getElementById("父窗口的元素ID");
// JS获取顶层窗口
var topWindow = window.top;
 
// Jquery方法
$('#父窗口中的元素ID', parent.document).click(); 

例：右键审查出一个元素<video> 

然后分别使用：self、self.opener、self.opener.opener，结果如下图： 

说明该元素在页面中的位置：top窗口-->iframe1(mainCont)-->iframe2(mainFrame)-->video元素

因此在顶端窗口获取该video元素的jquery选择器语法：注意是在顶端窗口！！！

控制台测试时必须处在顶端窗口（即选中一个顶端元素）。

$("#mainCont").contents().find("#mainFrame").contents().find("video") 

 注意：页面存在多级iframe时，当第一级iframe加载完成后，即触发window.onload函数，执行Tampermonkey脚本，这时可能因下级iframe尚未加载，导致下级iframe和其内部元素无法获取到。可以简单使用 setTimeout()函数延迟脚本执行。