我正在寻找一种 Web 服务，它可以像图表一样显示网页的 html 结构。
几年前我看过一个看起来很漂亮的应用程序。输入是一个 URL，输出是一个 flash 树，其分支就像弹簧一样，节点对于不同的标记名具有不同的颜色。
我不确定这是否是一个 SO 问题。如果没有，请您指向正确的 stackexchange 页面吗？
谢谢！
问问题
52 次
2 回答
1
不确定我是否理解正确，但这是我发现的
于 2013-08-13T14:46:21.957 回答
0
不确定您对“图形”的看法，但是当我试图学习 DOMNodes 时，我开始玩弄 html 的可折叠演示文稿。
这是我到目前为止得到的：
- 来源：http ://htmlviewer.puggan.se/htmlviewer/htmlviewer.201308131630.phps
- 直播：http ://htmlviewer.puggan.se/htmlviewer/htmlviewer.201308131630.php
<?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><</span>";
echo "<span class='tag_name'>" . $node->tagName . "</span>";
print_attributes($node);
echo "<span>></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></</span>";
echo "<span class='tag_name'>" . $node->tagName . "</span>";
echo "<span>></span>";
echo "</span>\n";
echo "</div>\n";
}
else
{
echo "<div class='node element_node element_node_solo'>";
echo "<span class='solo_close'>";
echo "<span><</span>";
echo "<span class='tag_name'>" . $node->tagName . "</span>";
print_attributes($node);
echo "<span>/></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 ' ';
}
}
?>
于 2013-08-13T14:38:06.677 回答