2013-08-13 2 views
1

Я ищу веб-сервис, который отображает html-структуру веб-страницы, например, график.Webservice: html как анимированное дерево?

Я видел приложение лет назад, которое выглядело красивым. Вход был URL-адресом, а выходным - флэш-дерево с ветвями, действующими как пружины, а узлы имели разные цвета для разных тэгов.

Я не уверен, что это вопрос. Если нет, можете ли вы указать мне правильную страницу стека?

Спасибо!

+0

Дорогой товарищ SO-er, если вы проголосуете, чтобы закрыть его, не могли бы вы помочь мне, где я мог бы обратиться с моей проблемой? Благодаря! –

ответ

1

Не уверен, если я правильно понял, но вот то, что я found

0

Не знаете, что вы используете с «graph», , но поскольку я перехожу к DernNodes, Я начал играть со складной презентацией html.

это то, что я получил до сих пор:

<?php 

    require_once('/mnt/data/www/libs/remote.php'); 

    if(isset($_GET['debug'])) 
    { 
     $debug_page = file_get_contents("exemple.html"); 
    } 

    $form_page = <<<HTML_BLOCK 
<html> 
    <head> 
     <title>HTML Viewer</title> 
     <style> 
      #url_input 
      { 
       width: 800px; 
      } 
     </style> 
    </head> 
    <body> 
     <!-- placeholder error --> 
     <form action='?' method='post'> 
      <label> 
       <span>Enter a URL</span> 
       <input type='text' name='url' id='url_input' /> 
      </label> 
      <br /> 
      <input type='submit' value='view HTML' /> 
     </form> 
    </body> 
</html> 
HTML_BLOCK; 

    if(isset($_REQUEST['url']) AND $_REQUEST['url'] OR isset($debug_page) AND $debug_page) 
    { 
     if(isset($debug_page) AND $debug_page) 
     { 
      $url = 'file:///debugpage.html'; 
      $page = &$debug_page; 
     } 
     else 
     { 
      $url = $_REQUEST['url']; 
      $url_parts = parse_url($url); 

      if($url_parts['scheme'] != 'http' AND $url_parts['scheme'] != 'https') 
      { 
       echo str_replace("<!-- placeholder error -->", "<p class='warning'>Bad url-scheme</p>"); 
       die(); 
      } 

      $hash = isset($url_parts['fragment']) ? $url_parts['fragment'] : FALSE; 

      $page = $remote_site->get_page($url); 
     } 

     if(!$page) 
     { 
      echo str_replace("<!-- placeholder error -->", "<p class='warning'>Page Empty</p>"); 
      die(); 
     } 

     $doc = new DOMDocument(); 
     @$doc->loadHTML($page); 

     if(!$doc) 
     { 
      echo str_replace("<!-- placeholder error -->", "<p class='warning'>Failed to read html</p>"); 
      die(); 
     } 

     echo <<<HTML_BLOCK 
<html> 
    <head> 
     <title>HTML Viewer</title> 
     <style> 
      .node 
      { 
       background-color: rgba(255, 255, 0, 0.01); 
       padding-left: 15px; 
       border: solid rgba(255, 0, 0, 0.2) 1px; 
      } 

      .text_node 
      { 
       max-height: 100px; 
       overflow: auto; 
      } 

      .close DIV.long, .close SPAN.long, .close IMG.long, DIV.short, SPAN.short, IMG.short 
      { 
       display: none; 
      } 

      .close SPAN.short, SPAN.long 
      { 
       display: inline; 
      } 

      .close DIV.short, .close IMG.short, DIV.long, IMG.long 
      { 
       display: block; 
      } 

      .expander 
      { 
       float: left; 
      } 
     </style> 
     <script> 
      DOMTokenList.prototype.replace = function replace(from, to) 
      { 
       this.remove(from); 
       this.add(to); 
      }; 

      DOMTokenList.prototype.togglePair = function togglePair(from, to) 
      { 
       if(this.contains(from)) 
       { 
        this.replace(from, to); 
       } 
       else 
       { 
        this.replace(to, from); 
       } 
      }; 

     </script> 
    </head> 
    <body> 
     <h1>{$url}</h1> 
     <div id='root_node'> 

HTML_BLOCK; 
     if($hash) 
     { 
      $node = $doc->getElementById($hash); 
      if($node) 
      { 
       print_node($node); 
      } 
      else 
      { 
       print_node($doc); 
      } 
     } 
     else 
     { 
      print_node($doc); 
     } 
     echo <<<HTML_BLOCK 

     </div> 
    </body> 
</html> 

HTML_BLOCK; 
    } 
    else 
    { 
     echo $form_page; 
    } 

    function print_node($node) 
    { 
     if(!$node instanceof DOMNode) 
     { 
      trigger_error("Bad node: " . (get_class($node) ?: gettype($node))); 
      return FALSE; 
     } 

     $classes = array('node'); 

     if($node instanceof DOMDocument) 
     { 
      echo "<div class='node root_node'>"; 
      if($node->hasChildNodes()) 
      { 
       echo "<!-- child nodes: " . $node->childNodes->length . " -->\n"; 
       foreach($node->childNodes as $child_node) 
       { 
        print_node($child_node); 
       } 
      } 
     } 
     else if($node instanceof DOMComment) 
     { 
      return FALSE; 
     } 
     else if($node instanceof DOMDocumentType) 
     { 
      echo "<div class='node dockument_type_node'>"; 
      echo htmlentities($node->internalSubset); 
     } 
     else if($node instanceof DOMText) 
     { 
      if(trim($node->wholeText)) 
      { 
       echo "<span class='short'>...</span>"; 
       echo "<div class='node text_node data_node long'>"; 
       //echo nl2br(htmlentities(trim($node->wholeText))); 
       echo "<pre>"; 
       echo htmlentities($node->wholeText); 
       //echo get_class($node); 
       //var_dump($node); 
       echo "</pre>"; 
       echo "</div>\n"; 
      } 
      else 
      { 
       return FALSE; 
      } 
     } 
     else if($node instanceof DOMCharacterData) 
     { 
      echo "<div class='node'>"; 
      echo "<pre>"; 
      echo get_class($node); 
      //var_dump($node); 
      echo "</pre>"; 
      echo "</div>\n"; 
     } 
     else if($node instanceof DOMElement) 
     { 
      //content 
      if($node->hasChildNodes()) 
      { 
       echo "<div class='node element_node element_node_normal node_element_{$node->tagName} close'>"; 

       echo "<span class='expander' onclick=\"this.parentNode.classList.togglePair('close', 'open'); \">"; 
       echo "<img class='short' src='https://www.interfaceways.se/img/icons/bullet_add.png' />"; 
       echo "<img class='long' src='https://www.interfaceways.se/img/icons/bullet_delete.png' />"; 
       echo "</span>"; 

       echo "<span class='tag_open'>"; 
       echo "<span>&lt;</span>"; 
       echo "<span class='tag_name'>" . $node->tagName . "</span>"; 
       print_attributes($node); 
       echo "<span>&gt;</span>"; 
       echo "</span>\n"; 

       echo "<!-- child nodes: " . $node->childNodes->length . " -->\n"; 

       echo "<span class='short'>...</span>"; 
       echo "<div class='long'>"; 
       foreach($node->childNodes as $child_node) 
       { 
        print_node($child_node); 
       } 
       echo "</div>\n"; 

       echo "<span class='tag_close'>"; 
       echo "<span>&lt;/</span>"; 
       echo "<span class='tag_name'>" . $node->tagName . "</span>"; 
       echo "<span>&gt;</span>"; 
       echo "</span>\n"; 
       echo "</div>\n"; 
      } 
      else 
      { 
       echo "<div class='node element_node element_node_solo'>"; 
       echo "<span class='solo_close'>"; 
       echo "<span>&lt;</span>"; 
       echo "<span class='tag_name'>" . $node->tagName . "</span>"; 
       print_attributes($node); 
       echo "<span>/&gt;</span>"; 
       echo "</span>\n"; 
       echo "</div>\n"; 
      } 
     } 
     else 
     { 
      echo "<div class='node'>"; 

      echo "<pre>"; 
      echo get_class($node); 
      //var_dump($node); 
      echo "</pre>"; 
      echo "</div>\n"; 
     } 
    } 

    function print_attributes($node) 
    { 
     if(!$node instanceof DOMElement) 
     { 
      return FALSE; 
     } 

     if($node->hasAttributes()) 
     { 
      echo " <span class='attributes'>"; 
      foreach($node->attributes as $node_attribute) 
      { 
       echo "<span class='attributes'>"; 
       echo "<span class='attribute_name'>"; 
       echo htmlentities($node_attribute->name); 
       echo "</span>"; 
       echo "<span>=\"</span>"; 
       echo "<span class='attribute_value'>"; 
       echo htmlentities($node_attribute->value); 
       echo "</span>"; 
       echo "<span>\"</span>"; 
       echo "</span> "; 
      } 
      echo "</span>"; 
     } 
     else 
     { 
      echo ' '; 
     } 
    } 
?> 
+0

Спасибо за ваш вклад, извините за не уточнение. Я хотел найти именно то, что удалось найти Фелипе Маркосу. (Проверьте это, это действительно выглядит весело!) –

+0

Для этого требуется Java, поэтому он не может видеть его с этого компьютера. –

Смежные вопросы