通过查找行号获取元素

我有一个onerror事件，它捕获异常的网址&行号。现在我需要从行号中获取元素的HTML。我如何查看DOM并获取特定行号的内容？通过查找行号获取元素

2013-08-01 Never Back Down

这几乎是不可能的，因为它完全取决于浏览器中的解释器。大多数内置的DOM检测工具甚至无法获得正确的行号。 –

尝试 htmlLines = html.split（“\ n”）; htmlLines [lineNumber]是你在找什么其中html是url的全部内容。 – vipulsharma

Rory的评论是差不多没错。这不一定是不可能的，但获得有效的东西将是一个彻头彻尾的破解。原因如下：

当您使用document.documentElement.outerHTML获取页面的HTML时，您开始遇到格式问题，因为不同的浏览器以不同的方式处理空白区域。考虑以下页面：

<html> 
    <head> 
     <title>Test Get HTML by Line Number</title> 
     <script type="text/javascript"> 
      window.onload = function() 
      { 
       var lines = document.documentElement.outerHTML; 
       console.log(lines); 
      }; 
     </script> 
    </head> 
    <body> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl, 
     eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae 
     malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium 
     in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p> 
    </body> 
</html>

在Chrome和Firefox，结果在JavaScript控制台看起来是这样的：

<html><head> 
     <title>Test Get HTML by Line Number</title> 
     <script type="text/javascript"> 
      window.onload = function() 
      { 
       var lines = document.documentElement.outerHTML; 
       console.log(lines); 
      }; 
     </script> 
    </head> 
    <body> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl, 
     eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae 
     malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium 
     in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p> 

</body></html>

但在IE浏览器，它看起来像这样：

<HTML><HEAD><TITLE>Test Get HTML by Line Number</TITLE> 
<SCRIPT type=text/javascript> 
      window.onload = function() 
      { 
       var lines = document.documentElement.outerHTML; 
       console.log(lines); 
      }; 
     </SCRIPT> 
</HEAD> 
<BODY> 
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl, eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</P></BODY></HTML>

我可以想到一些可能会让你得到你想要的结果的东西，但是我认为它真的很冒险;所以我锣建议你不要做，我不会倒一吨的精力投入到它：

复制你的整个页面，从一开始的HTML标签到结束HTML在这样的页面上的最后一个注释标记：

<html> 
    <head> 
     <title>Test Get HTML by Line Number</title> 
    </head> 
    <body> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl, 
     eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae 
     malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium 
     in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p> 
    </body> 
</html> 
<!-- 
<html> 
    <head> 
     <title>Test Get HTML by Line Number</title> 
    </head> 
    <body> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet venenatis metus. Sed lobortis semper nisl, 
     eget mollis nisl rutrum sed. Duis iaculis pharetra eros, eget imperdiet felis aliquet non. Aliquam non viverra eros, vitae 
     malesuada lacus. Sed ligula sapien, volutpat id diam ac, bibendum imperdiet lacus. Proin turpis lorem, blandit nec pretium 
     in, lobortis eu erat. Cras ultrices sapien nec quam luctus, nec dictum ante semper.</p> 
    </body> 
</html> 
-->

获取最后一个注释的内容（这应该帮助：Get text inside HTML comment tag?）。当我在公认的答案中尝试了小提琴时，它在Chrome，Firefox和IE中提供了格式正确的空格。
拆分结果的换行符（ “\ n”）
查找你的行号，和中提琴！你走了。

所以，就像我之前警告过的那样。这个“解决方案”膨胀了你的HTML并且是一个彻头彻尾的破解。但这是我能想到的唯一方法，那就是保留空白区域并让你找到你想要的确切行数。

我希望这会有所帮助，请不要相信我，如果你最终使用黑客。

来源

2013-08-01 21:36:04

通过查找行号获取元素

回答

相关问题