Вопрос

У меня есть 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) отображает пустую строку в консоли JavaScript Chromium.Однако Firebug в Firefox отображает весь HTML-код данных целиком.

Я что-то упускаю?Есть какие-нибудь указания?

Это было полезно?

Решение

Не уверен в ответе, но есть несколько направлений расследования, которые я мог бы придумать:

  1. Являются ли данные объектом (а не строкой?) Возможно, консоль Chromium не знает, как их отобразить.Вы могли бы попробовать альтернативный метод вывода, чтобы протестировать его, или посмотреть, имеет ли значение параметр "Тип данных" какое-либо значение.
  2. Вызывается ли вообще обратный вызов success в Chromium?Это может быть ошибка или какая-то функция безопасности браузера (например, защита от межсайтовых скриптов или отключение javascript), которая блокирует его.
  3. Поэкспериментируйте со статической версией HTML / CSS, которую должен создавать ваш код, и убедитесь, что она правильно отображается в обоих браузерах.
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top