Question

我有一个onerror事件，捕获网址和＆amp;异常的行号。现在我需要从行号中获取元素的HTML。如何查找DOM并获取该特定行号的内容？

Answer 1

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>

我可以想到一些可能会让你得到你想要的结果的东西，但是我觉得它真的很hacky ;所以我建议你不要这样做，我不打算投入大量精力：

复制整个页面，从开头的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，是一个彻头彻尾的黑客。但这是我能想到的唯一方法，它可以保留空白区域并让你找到你想要的确切行号。

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

通过查找其行号来获取元素

1 个答案: