注入html源码到浏览器的几种方式

最新推荐文章于 2024-07-31 11:05:25 发布

上帝De助手

最新推荐文章于 2024-07-31 11:05:25 发布

阅读量1.7w

点赞数

分类专栏： html 文章标签： html注入浏览器

本文链接：https://blog.csdn.net/five3/article/details/19286495

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>";