通过JavaScript获取页面的HTML源代码并覆盖它

Getting HTML source of a page by JavaScript and overwriting it

本文关键字：源代码 覆盖 HTML JavaScript 获取 通过      更新时间：2023-09-26

我正在使用Javascript为浏览器编写一个扩展。如何获取整个HTML源代码并重新编写？

我需要更改源代码中的一些单词并重新打开该页面。

在javascript中，您可以尝试以下操作：

var source = document.documentElement.outerHTML;

和获取doctype使用：

var doctype = document.doctype;

来源：获取整个文档'；带有JavaScript/JQuery 的s html

我还发现了这篇关于在Chrome扩展中做同样事情的帖子，如果这有帮助的话：

从chrome扩展获取当前页面的源HTML

尝试这样的操作来获取页面源：

document.documentElement.innerHTML

这个改变了它：

document.documentElement.innerHTML = '<body>I like pie</body>'

document.documentElement是页面上的<html> ... </html>元素，innerHTML将给出它的HTML。

您可以使用获取整个页面的来源

oldSource = document.getElementsByTagName("html")[0].innerHTML;

然后将整个页面替换为：

document.write(newSource);

或者，如果您想替换页面上的几个元素，请使用以下选项之一：

  1. 如果你知道元素的id：

    oldText = document.getElementById("idOfElement").innerHTML;
document.getElementById("idOfElement").innerHTML = newText;

  2. 如果你知道元素的class：

    oldText = document.getElementsByTagName("classOfElement")[0].innerHTML;
document.getElementsByTagName("classOfElement")[0].innerHTML = newText;

    （其中0表示您正在查找页面上具有指定类名的第一个元素）

  3. 如果您知道元素的标签名称：

    oldText = document.getElementsByClassName("tagName")[0].innerHTML;
document.getElementsByClassName("tagName")[0].innerHTML = newText;

    （其中0表示您正在查找页面上具有特定标签名称的第一个元素）

  4. 或者，您可以使用jQuery选择器，例如：

    oldText = $("#idOfElement").html();
oldText = $(".classOfElement").html();
oldText = $("tagName:nth-child(1)").html();
$("#idOfElement").html(newText);
$(".classOfElement").html(newText);
$("tagName:nth-child(1)").html(newText);

    其中:nth-child(1)表示您正在查找页面上具有指定标记名称的第一个元素。如果存在多个具有相同类名的元素，则在搜索类时也可以使用此选项

相关文章：