将Javascript代码注入网页

时间:2013-01-11 06:48:06

标签: javascript jquery html

我想将网页下载为html文件。在我将网页源代码保存在html文件中之前,我想首先编辑一些页面内容。我假设我可以使用Javascript编辑内容。不幸的是,我对Javascript的经验不多。我想我必须将我的脚本注入网页,以便浏览器可以一起执行它们。我应该怎么写我的剧本?我应该编写一个独立的脚本并将页面url传递给我的脚本,以便它们可以同时执行吗?或者还有其他方法可以注入我的脚本吗?

编辑:要清楚我的问题,请参阅this postthis post

2 个答案:

答案 0 :(得分:2)

由于您只是这样做一次,从浏览器JavaScript控制台启动脚本就足够了。打开开发人员工具,导航到控制台选项卡,粘贴脚本内容,然后按Enter键。

要获取已编辑的HTML,请在控制台中评估表达式document.documentElement.outerHTML。将输出复制到您选择的文本编辑器,前面加上doctype,并将其另存为html。

答案 1 :(得分:1)

如果你想将修改后的源码保存为html,你可以使用不同的aproaches,取决于你想要主要的。遗憾的是,使用javascript保存文件很棘手并且取决于很多东西,因此您可以使用选项手动复制粘贴文件源或编写浏览器和设置特定的文件保护程序。我更喜欢javascript + php组合解决方案。或者,如果没有必要使用javascript操纵某些东西,我会完全在php中完成。

步骤1 - 使用控制台打开浏览器,使用chrome和firefox CTRL + SHIFT + J并允许弹出窗口。 第2步 - 打开你想要的网页 第3步 - 将下一个代码复制到控制台

//Script loading function
function load_script( source ) {
    var new_script  = document.createElement('script');
    new_script.type = 'text/javascript';
    new_script.src = source;
    new_script.className = 'MyInjectedScript';
    document.getElementsByTagName('head')[0].appendChild(new_script);
}
function escapeHtml(unsafe) {
  return unsafe
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}
//Load jQuery, if page do not have it by default
if (typeof(jQuery) != 'function') load_script('http://code.jquery.com/jquery-latest.js');

第4步 - 在控制台中进行操作

步骤5 - 将下一个代码复制到控制台

//In the end remove your injected scripts
$('.MyInjectedScript').remove(); //Or jquery script will be in source
//get Document source
var doc_source = $('html',document).html();
doc_source = '<html>'+doc_source+'</html>';


var new_window = window.open('', '', 'scrollbars=yes,resizable=yes,location=yes,status=yes');
$(new_window.document.body).html('<textarea id="MySource">'+escapeHtml(doc_source)+'</textarea>');

第6步 - 从打开的窗口textarea中复制粘贴代码

如果您想使用PHP进行操作,可以轻松下载带有curl的页面并操作内容并根据需要保存文件。