我有一个HTML(应用程序)文件,它通过jQuery.ajax()
读取另一个HTML(数据)文件。然后,它会在数据HTML文件中找到特定标记,并使用标记中的文本来显示各种工具提示。
这是App HTML文件:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Test</title>
<style type="text/css">
<!--/* <![CDATA[ */
body {
font-family : sans-serif;
font-size : medium;
margin-bottom : 5em;
}
a, a:hover, a:visited {
text-decoration : none;
color : #2222aa;
}
a:hover {
background-color : #eeeeee;
}
#stat_preview {
position : absolute;
background : #ccc;
border : thin solid #aaa;
padding : 3px;
font-family : monospace;
height : 2.5em;
}
/* ]]> */-->
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#stat_preview").hide();
$(".cfg_lnk").mouseover(function () {
lnk = $(this);
$.ajax({
url: lnk.attr("href"),
success: function (data) {
console.log (data);
$("#stat_preview").html("A heading<br>")
.append($(".tool_tip_text", $(data)).slice(0,3).text())
.css('left', (lnk.offset().left + lnk.width() + 30))
.css('top', (lnk.offset().top + (lnk.height()/2)))
.show();
}
});
}).mouseout (function () {
$("#stat_preview").hide();
});
});
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Test</h1>
<ul>
<li><a class="cfg_lnk" href="data.html">Sample data</a></li>
</ul>
<div id="stat_preview"></div>
</body>
</html>
这是数据HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Test</h1>
<table>
<tr>
<td class="tool_tip_text"> Some random value 1</td>
<td class="tool_tip_text"> Some random value 2</td>
<td class="tool_tip_text"> Some random value 3</td>
<td class="tool_tip_text"> Some random value 4</td>
<td class="tool_tip_text"> Some random value 5</td>
</tr>
<tr>
<td class="tool_top_text"> Some random value 11</td>
<td class="tool_top_text"> Some random value 21</td>
<td class="tool_top_text"> Some random value 31</td>
<td class="tool_top_text"> Some random value 41</td>
<td class="tool_top_text"> Some random value 51</td>
</tr>
</table>
</body>
</html>
这在Firefox中有效,但在Chrome(Chromium 5.0.356.0)中没有。
console.log (data)
在Chromium的JavaScript控制台中显示空字符串。但是,Firefox中的Firebug会显示整个数据HTML。
我错过了什么吗?有什么指针吗?
答案 0 :(得分:0)
不确定答案,但我想到的一些调查途径: