HTML5教程

Tampermonkey获取渲染后的HTML

本文主要是介绍Tampermonkey获取渲染后的HTML,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

Tampermonkey的官网:http://tampermonkey.net/

由于页面渲染完成的时间不能确定,假设在加载后1秒内渲染完成,输出渲染后的HTML。脚本代码片段如下:

setTimeout(function(){
	console.log(document.documentElement.outerHTML);
},1000);

应用:
爬虫、自动化测试等。
由于浏览器功能的限制,脚本不能直接访问系统内的存储设备,它和外界交流的方式好像只有Ajax,但似乎这样就已经足够了。因为只要搭建一个后端与脚本交互(注意解决跨域问题),就能突破这些限制,只是在爬虫的设计上更为复杂。

很多网页都引入了JQuery ,所以不必引入外面的脚本就能使用JQuery的函数和变量了。

以下是一个手动创建HTML快照的例子:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @connect      localhost
// ==/UserScript==

(function() {
    'use strict';
    function post(url,obj,func){
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8080/'+url,
            data: JSON.stringify(obj),
            success: func,
            contentType: 'application/json; charset=utf-8',
            dataType:'json'
        });
    }

	//新建标签页
    function jump(url){
        $('<a target="_blank"></a>').attr('href',url)[0].click();
    }
    
    //在页面加入控制按钮
	function add(){
        var b=$('<button>快照</button>');
        b.prependTo('body');
        b.click(function(){
            b.remove();
            snapshot();
            add();
        });
    }

	function snapshot(){
        post('',{html:document.documentElement.outerHTML});
    }

    add();
})();
这篇关于Tampermonkey获取渲染后的HTML的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!