3

我有一个 html 页面,我想在上面找到一些数据,但主要问题是该页面是在服务器上生成的,我想在本地机器上编写 javascript 代码并运行它。那么如何在本地机器上编写和运行 javascript 代码,以便它可以找到文本,或者通过 id/class 获取元素?

注意,这很重要:只有纯 javascript,没有像 jQuerys 之类的库!

谢谢你。

4

2 回答 2

4

更新答案

起初我不明白你想调用一个你无法控制的网页,然后在你的浏览器中使用 JavaScript 与之交互。

下面原始答案中的信息仍然相关,但问题是:如何使代码在正确的上下文中运行?答案是:至少有两种方法:

  1. 现在任何像样的浏览器都有内置的调试工具。在菜单上查看它们,但在许多浏览器中,它们可以通过F12键或Ctrl++Shift访问I。在这些工具中,您会找到一个“控制台”,您可以在其中键入 JavaScript 并让它在您正在查看的页面的上下文中运行。

    这非常适合交互式地做事,但每次都重新输入它有点痛苦。您还可以将代码放在本地文件中(例如,/home/tjc/foo.js),然后当您转到页面时,使用控制台将该脚本附加到页面(这将导致它在页面的上下文中执行),例如这个:

     document.documentElement.appendChild(document.createElement('script')).src = "file:///home/tjc/foo.js";
    
  2. 一旦你的脚本做你想做的事,你可能想把它变成一个小书签javascript:这是一个使用该方案而不是通常http:等的浏览器书签。有关详细信息,请参阅链接。您将需要一个工具来获取您的 JavaScript 代码并为您进行必要的 URL 编码,例如Bookmarklet Crunchinator或类似工具。


原始答案

...以便它可以找到文本,或通过 id/class 获取元素...

这是三个非常不同的问题:

  1. 要在页面上查找文本,您有几个选项:

    1. 如果您只想查找文本但不太关心包含它的确切元素,则可以innerHTMLdocument.body. innerHTML是一个字符串;当您访问它时,浏览器会为您调用它的元素(及其后代)中的所有 DOM 元素创建一个 HTML 字符串。请注意,这不是来自服务器的原始内容;这是在您访问元素时即时创建的。对于很多用例,获取此字符串然后查看它可能很有用。请注意,您正在搜索的文本是标记,因此,例如,如果您搜索单词“table”,您可能会在句子(“We sat up at the table.”)或标记(<table>...)中找到它。

      I'm这是一个使用以下方法计算页面上单词的示例innerHTMLlive copy | 来源- 请参阅末尾有关示例的注释。

       (function() {
      
         var pageText = document.body.innerHTML;
         display('Count of "I\'m" on the page: ' +
                 pageText.match(/I'm/g).length);
      
         function display(msg) {
           var p = document.createElement('p');
           p.innerHTML = String(msg);
           document.body.appendChild(p);
         }
      
       })();
      
    2. 如果您需要准确找出它所在的元素,则需要编写一个遍历页面节点的递归函数,对于Textnodes,查看其中的文本。这是一个基本示例(函数就是walk函数):Live copy | 来源- 请参阅末尾有关示例的注释。

       (function() {
         var matches = [], index;
      
         walk(matches, document.body, "");
      
         function walk(matches, node, path) {
           var child;
      
           switch (node.nodeType) {
             case 1: // Element
               for (child = node.firstChild; child; child = child.nextSibling) {
                 walk(matches, child, path + "/" + node.tagName);
               }
               break;
             case 3: // Text
               if (node.nodeValue.indexOf("I'm") !== -1 ) {
                 matches.push("Found it at " + path);
               }
               break;
           }
         }
      
         display("Matches found (" + matches.length + "):");
         for (index = 0; index < matches.length; ++index) {
           display(matches[index]);
         }
      
         function display(msg) {
           var p = document.createElement('p');
           p.innerHTML = String(msg);
           document.body.appendChild(p);
         }
      
       })();
      
  2. 要通过 查找页面上的元素id,请使用document.getElementById

  3. 要通过 查找页面上的元素class,在大多数现代浏览器上,您可以使用getElementsByClassNamequerySelectorAll

请注意示例:我使用的是JSBin,默认情况下,它会将您在左侧看到的 JavaScript 放在您在右侧看到的 HTML 的末尾(就在结束</body>标记之前)的“源”视图中. 这符合最佳实践

阅读:

于 2012-04-23T13:52:32.037 回答
1

如果您正在寻找 imacros 解决方案,那么它是这样的:

 var reportDataTable = window.content.document.getElementById("yoursid");
 if (reportDataTable == null)
 {
    iimPlay("mac1.iim");
 }
 else
 {
    iimDisplay("stop!");
 }

其中 mac1.iim 是宏,它会重复,直到

window.content.document.getElementById("yoursid");

不会成立

于 2012-04-23T16:32:54.403 回答