1、通过各浏览器提供的接口调用
IE的COM接口,FF的插件、Chrome的API接口等;类似的实现有Selenium的webdriver支持的各种driver,
它们都是调用了浏览器的原始接口。
2、通过已有的第三方程序来间接调用浏览器:
比如上面的所提到的webdriver所支持的各种driver;目前这些driver提供支持很多的浏览器操作,注入源码应该也提供了吧!
具体的还没有试过,但是也算是一种可能。
3、利用嵌入式浏览器引擎提供的接口:
CEF是webkit的嵌入式引擎,可以直接程序调用它来实现一个自定义的浏览器,国内大部分浏览器应该就是这样出来的吧;
所以注入点html源码应该是没有什么问题。
4、利用类浏览器程序来实现:
PhantomJS是一款基于webkit的无GUI浏览器引擎,可以做很多浏览器都支持的事情,更方便的是它有提供非常好的编程接口,
注入HTML就是其中一个。
5、利用JS注入到浏览器页面:
直接通过JS获取病改变HTML内容;或者新建一个iframe后注入HTML到iframe中,其实效果就等同于注入到一个新开的浏览器页面。
6、通过自动化工具直接注入:
类似selenium的自动化工具,其实都可以直接获取到document对象,所以也就可以直接操作dom从而修改页面内容,达到注入新html的目的。
因为前3种的研究和开发成本都较高,所以可以考虑选择4、5种方法;这里记录下4、5种方法的实现方式:
PhantomJS的注入样例:
var page = require('webpage').create();
page.viewportSize = { width: 400, height : 400 };
page.content = '<html><body><canvas id="surface"></canvas></body></html>'; //要注入的HTML代码
page.render('2.png'); //截屏
phantom.exit();
JS利用iframe注入的样例:
var iframe = '<iframe src="about:blank" frameborder="0" name="FirebugUI" id="FirebugUI" style="border: 0px; visibility: visible; z-index: 2147483647; position: fixed; width: 100%; left: 0px; bottom: 0px; height: 241px; display: block;"></iframe>';
$("body").append(iframe); //添加iframe
var ifs = $('#FirebugUI').contents().get(); //获取iframe的document对象
var ifs2 = document.getElementById('FirebugUI').contentWindow.document; //获取iframe的document对象
var ifs3 = window.frames["FirebugUI"].document;
ifs.head.innerHTML = "<title>test JS iframe</title>";
ifs.body.innerHTML = "<div>success</div>";