将HTML源代码作为字符串获取

Question

我想要将一个HTML页面的源代码(1.html)用于另一个页面(2.html)。此外，我想要在2.html中对其进行操作。

有没有方法可以做到这一点？

编辑: 1.html是一个单独的公共网页，我无法更改它的源代码。我必须只使用2.html来完成我需要做的事情。

- user1196522

---

什么样的操作？ - Pekka

你想使用jQuery从2.html获取1.html页面的整个内容吗？ 如果我理解你想做的事情正确，你可以通过发起一个AJAX请求来获取它。 - Aldo 'xoen' Giambelluca

@Pekka：简单的操作，比如从1.html中提取一些innerHTML并显示到2.html。 Aldo 'xeon'：这是一个跨域请求，所以AJAX不起作用。 - user1196522

Answer 1

获取将DOM转换为字符串的方法：

document.getElementsByTagName('html')[0].innerHTML

问题：你所说的“使用它”是什么意思？你需要将1.html包含在2.html中吗？还是只需要处理它？

- Samuele Mattiuzzo

---

海报想要获取另一个页面的HTML。 - 472084

.innerHTML 实际上并不返回源代码，它生成与当前 DOM 树对应的 HTML。细微的差别，但仍然存在... - nnnnnn

源代码是网站开发人员编写的未经处理的HTML。 innerHTML 将给出转换为字符串的DOM。DOM化的HTML将已修复HTML错误（程度不同），并且JavaScript更改将在其中反映出来。 - Surender Thakran

反射。此外，请检查OP在自己的帖子中的评论：他需要从该页面获取元素以在其他地方再次显示它们。正确的DOM最适合他。要求页面的“源代码”并不可行，除非您直接访问原始、未经处理、未经服务器过滤的文件。我希望他现在过得很好，两年后。 - Samuele Mattiuzzo

啊，我不能再编辑它了，但感谢你指出来！ - Samuele Mattiuzzo

Answer 2

这非常简单

在2.html中使用以下jQuery代码片段

$.get("1.html", function(response) { 
    alert(response) 
    //do you operations
});

- Starx

Answer 3

jQuery:

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

- eozzy

Answer 4

我不明白你所说的必须进行修改，但是你可以通过 AJAX 加载第二个页面。

var url ="1.html";
$.ajax({
  url: url,
  dataType: 'html'
  success: function(data){
             //do something with data, which is the page 1.html
           }

});

- Nicola Peluchetti

Answer 5

您可以使用 .html 方法来获取整个页面的 HTML 数据。

$(function(){
    var a = ($('html').html())
})​

- nightf0x

Answer 6

一个真正简单而现代的方法是如下所示：

fetch('1.html').then(function(response) {
    /* when the page is loaded convert it to plain text */
    return response.text()
}).then(function(html) {
    /* initialize the DOM parser */
    var initParser = new DOMParser();
    /* parse the text */
    var parse = initParser.parseFromString(html, 'text/html');
    /* you can now even select part of that html as you would in the regular DOM */ 
    /* example */
    var docOutput = parse.querySelector('html').outerHTML;
    console.log(docOutput);
}).catch(function(error) {  
    console.log('Error fetch page: ', error);  
});

- MaZzIMo24