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

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


阅读更多

扫码向博主提问

像风一样的自由

博客专家

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • Python
  • 测试开发
  • 测试自动化
去开通我的Chat快问

没有更多推荐了,返回首页