Question

我有以下2个文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
function init(){
document.getElementById("mytest").innerHTML= "Results after rendering...";
}

</script>
<body onload="init();"><div id="mytest">OK</div>
</body>
</html>

第二页通常会弹出警报弹出第一页的所有源代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
 xmlhttp.open("GET", "test.html",true);
 xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4) {
   alert(xmlhttp.responseText)
  }
 }
 xmlhttp.send(null)
</script>
<body>
</body>
</html>

我想做的就是我想在渲染后获得源代码。如何在渲染后获取所有代码而不是获取所有原始代码。所以我可以阅读＆lt; div id =“mytest”＆gt;渲染后的结果...＆lt; / div＆gt;当我尝试使用XMLHTTP时。如何获取已经为页面呈现的代码，我只想使用经典的Javascript或DOM，我根本不想使用Jquery，JSON，Mootool。提前谢谢。

Answer 1

不是使用ajax加载页面，而是使用浏览器的iframe支持。

将警告HTML源的第二个文件更改为以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script>
function displayAlert()
{
    alert(document.getElementById('iframe').contentDocument.body.innerHTML);
}
</script>
<body onload="displayAlert()">
<iframe src="test.html" id="iframe" style="display:none;"></iframe>
</body>
</html>

这会在不可见的iframe中加载 test.html 。您的浏览器会自动在iframe中呈现 test.html ，并在完成后调用 displayAlert（）。 displayAlert（）将获取iframe中的源代码并提醒它。但是，此解决方案仅在 test.html 与上述脚本位于相同服务器上时才有效。如果 test.html 位于完全不同的服务器上，则此解决方案将无效，因为将拒绝访问iframe的权限。如果是这种情况，我可以告诉您另一种可以绕过此问题的解决方案。

Answer 2

我不确定我知道你在问什么，但为什么不这样做：

alert(document.body.innerHTML);

获取实际呈现的正文HTML，其中包含脚本在加载时所做的任何更改。

注意：即使未修改的innerHTML部分也不会总是与原始源HTML完全比较，因为在某些情况下，浏览器正在从其他一些解析数据表单中重构innerHTML，因此属性可能没有相同的引用或者顺序相同，大写可能不一样。

使用Javascript获取渲染页面源

2 个答案: