Question

我有一个在两个浏览器窗口中打开的页面，它通过套接字传递用户交互。如果有人点击了一个元素，我希望它在其他浏览器中发生。为此，我需要知道与之交互的元素。

我有几个选择，但没有一个可以100％保证可以工作。

按元素名称：可以有多个具有相同名称的元素。
by id：并非所有元素都有id
按类：并非所有元素都有类，并且类不是唯一的
按位置：如果网站在两个不同的浏览器中打开，则位置可能不同。

那么还有另一种方法来识别100％结论的元素吗？

Answer 1

如果两个页面中都有完全相同的HTML，那么您可以简单地使用在父文件中使用索引构建的“路径”，直到document.body。它易于构建且易于使用以查找元素。

以下是计算此路径或遵循该路径的函数：

function indexInParent(node) {
    var children = node.parentNode.childNodes;
    for (var i=0; i<children.length; i++) {
         if (children[i]==node) return i;
    }
    return -1;
}

function nodePath(e) {
   var path = [];
   while (e!=document.body) {
      path.push(indexInParent(e));
      e = e.parentNode;
   }
   return path.reverse().join('-');
}

function getNode(path) {
   path = path.split('-');
   var e = document.body;
   while(path.length && e) e=e.childNodes[parseInt(path.shift())];
   return e;
}

Demonstration：点击“使用JS运行”，然后点击

单击元素以查看控制台中的路径
键入路径以查看控制台中的元素

识别跨浏览器的元素

1 个答案: