新手上路，请多包涵

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

编辑：为了弄清楚我的问题，请参阅这篇文章和这篇文章

原文由 Terry Li 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript html jquery javascript-injection

阅读 554

2 个回答

得票最新

社区维基

发布于
2022-12-12

✓ 已被采纳

由于您只执行一次，因此从浏览器的 JavaScript 控制台启动脚本应该就足够了。打开开发人员工具，导航到控制台选项卡，粘贴您的脚本内容，然后按 enter。

要获取编辑后的 HTML，请在控制台中计算表达式 document.documentElement.outerHTML 。将输出复制到您选择的文本编辑器，在其前面加上文档类型，并将其另存为 html。

原文由 Bergi 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-12

如果您想将修改后的源代码保存为 html，您可以使用不同的方法，具体取决于您要维护的内容。遗憾的是，使用 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, "&amp;")
      .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 步 - 从打开的窗口文本区域复制粘贴代码

如果你想用 PHP 来做，你可以使用 curl 轻松下载页面并操作内容并根据需要保存文件。

原文由 Aivar 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

将 Javascript 代码注入网页

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

问一个鼠标滚动事件，这种是怎么实现的？

Stack Overflow 翻译