通過JavaScript獲取HTML頁面的源代碼並覆蓋它

我正在爲使用Javascript的瀏覽器編寫擴展。我如何獲取整個HTML源代碼並重新編寫它？通過JavaScript獲取HTML頁面的源代碼並覆蓋它

我需要更改該源內的某些單詞並重新打開該頁面。

2013-07-08 Hurrem

對於哪個瀏覽器？適用於任何瀏覽器的 – SLaks

。主要用於Chrome – Hurrem

如果您要求，您可以使用'document.getElementsByTagName（「html」）[0] .innerHTML'來讀取源代碼和'document.write'來重寫頁面。然而，我建議你使用像document.getElementById（「idOfTheElement」）。innerHTML =「new string」'這樣的東西來改變文檔中的幾個詞，而不是重寫整個頁面（如果你知道其中的id/class元件）。 –

嘗試這樣的事情來獲得頁面的源代碼：

document.documentElement.innerHTML

而這個改變它：

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

document.documentElement是頁面上的<html> ... </html>元素，innerHTML將給是HTML的。

來源

2013-07-08 15:13:28 Doorknob

如果我想從頭開始呢？整個頁面 – Hurrem

@hurremdev不幸的是，這是不可能的JavaScript。 – Doorknob

@hurremdev是的，標題在'head'元素中。 'html'元素包含'head'。 – Doorknob

在javascript中，你可以嘗試像：

var source = document.documentElement.outerHTML;

...並獲得文檔類型使用：

var doctype = document.doctype;

來源：Get the whole document's html with JavaScript/JQuery

我也發現了關於在Chrome擴展做同樣的事情這個帖子如果這能幫助：

Getting the source HTML of the current page from chrome extension

來源

2013-07-08 15:17:38 jrthib

你可以得到整個頁面的來源：

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

然後用更換整個頁面：

document.write(newSource);

或者，如果你想更換頁面上的幾個元素，使用下列之一：

如果你知道id的元素：

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

如果您知道元素的class：

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

（其中0意味着你正在尋找的第一個元素在頁面上中的指定類名）

如果你知道元素的標籤名稱：

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

（其中0意味着你正在尋找與頁面上中的指定標籤名稱的元素）

或者，你可以使用jQuery selectors，例如：

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)意味着你正在尋找與頁面上中的指定標籤名稱的元素。如果有多個元素具有相同的類名，那麼在搜索類時也可以使用它。

來源

2013-07-08 16:05:40

通過JavaScript獲取HTML頁面的源代碼並覆蓋它

回答

相關問題