我正在寻找一种 Web 服务,它可以像图表一样显示网页的 html 结构。
几年前我看过一个看起来很漂亮的应用程序。输入是一个 URL,输出是一个 flash 树,其分支就像弹簧一样,节点对于不同的标记名具有不同的颜色。
我不确定这是否是一个 SO 问题。如果没有,请您指向正确的 stackexchange 页面吗?
谢谢!
我正在寻找一种 Web 服务,它可以像图表一样显示网页的 html 结构。
几年前我看过一个看起来很漂亮的应用程序。输入是一个 URL,输出是一个 flash 树,其分支就像弹簧一样,节点对于不同的标记名具有不同的颜色。
我不确定这是否是一个 SO 问题。如果没有,请您指向正确的 stackexchange 页面吗?
谢谢!
不确定我是否理解正确,但这是我发现的
不确定您对“图形”的看法,但是当我试图学习 DOMNodes 时,我开始玩弄 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><</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 ' ';
}
}
?>