2

経由で別の HTML (データ) ファイルを読み取る HTML (アプリ) ファイルがありますjQuery.ajax()。次に、データ 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>

<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 全体を表示します。

何か不足していますか？ポインタはありますか？

4

1 に答える 1

0

答えはわかりませんが、私が考えることができるいくつかの調査手段：

  1. データは (文字列ではなく) オブジェクトですか? おそらく、Chromium コンソールはそれを表示する方法を認識していません。別の出力方法を試してテストするか、「dataType」設定を指定すると違いが生じるかどうかを確認できます。
  2. Chromiumで成功コールバックがまったく呼び出されていますか? バグであるか、ブラウザーのセキュリティ機能 (クロスサイト スクリプティング保護や JavaScript の無効化など) がブロックしている可能性があります。
  3. コードが生成することになっている HTML/CSS の静的バージョンを試して、両方のブラウザーで適切に表示されることを確認してください。
于 2010-03-31T06:22:36.220 に答える