Проблема с IE7 JQuery, Ajax и CSS - PullRequest
Новая
       16

Проблема с IE7 JQuery, Ajax и CSS

1 голос
/ 27 марта 2009

На простой веб-странице я загружаю новый HTML-код в div , используя load (url) Работает нормально в большинстве браузеров, но, как ни удивительно, IE7 ведет себя по-разному. Все остальные браузеры применяют стили CSS страниц к недавно загруженному HTML, а IE7 - нет.

Есть идеи?

Ken

Обновление Новый HTML - это просто фрагмент кода, например, 

<div class="classname">
blah blah blah
</div>

Обновление Я думаю, что я называю это ОК. Это не то, чем я на самом деле занимаюсь, а упрощенная версия, которая воспроизводит проблему ... 

.
.
.    
google.load("jquery", "1.3.2"); 
    google.setOnLoadCallback(function() {
       $(document).ready(function() {
         $("#nav-home").click(function() {
           $("#girc-content").load("home.html");
         });
.
.
.

Обновление При дальнейшем исследовании проблема выглядит несколько более странной, чем я думал.

Я попробовал предложение Стирпайка, потому что изначально думал, что проблема в том, что стили CSS не применяются.

Однако теперь кажется, что применяются только некоторые из стилей. Например, атрибут цвета текста для тега <h2> применяется, а атрибут ширины для тега <div> - нет.

Ответы [ 4 ]

2 голосов
/ 17 августа 2011

Ссылка помогла мне; по существу, добавление тега стиля в голову, даже динамически, применяет стили через ie. Я добавил это в начало обработчика onready, и он работал хорошо.

http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
  rel:  "stylesheet",
  type: "text/css",
  href: "/javascripts/jwysiwyg/jquery.wysiwyg.css"
});
2 голосов
/ 27 марта 2009

Попробуйте ', коснувшись ' содержимого снова после загрузки. Самый простой способ - добавить пустую строку к innerHTML

. 
$("#nav-home").click(function() {
    $("#girc-content").load("home.html");
    $("#girc-content")[0].innerHTML += '';
});
2 голосов
/ 27 марта 2009

В свете дополнительной информации возьмите 2 ...

Стили не применяются на главной HTML-странице или странице, которую вы загружаете? Если они находятся на странице, которую вы загружаете, кажется, что IE удаляет теги script и style из объектов XMLHttpRequest.

Учитывая, что это не так, и я заинтригован, я создал образец: 

<html>
<head>
<title>test</title>
<style type="text/css">
#girc-content { border: 1px solid black; width: 100px }
h3 { color: red; }
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2"); 
google.setOnLoadCallback(function() {
  $(document).ready(function() {
    $("#nav-home").click(function() {
      $("#girc-content").load("test2.html");
    });
  });
});
</script>
</head>
<body>
<div id="girc-content">
blah blah blah
</div>
<input type="button" value="click me" id="nav-home">
</body>
</html>

и test2.html: 

<html>
<head>
</head>
<body>
<h3>This is a test</h3>
</body>
</html>

Это прекрасно работает для меня в стандартах IE8 и режиме совместимости (извините, IE7 больше нет).

Я заметил, что когда скопировал ваш фрагмент загрузки Google, вы пропустили некоторые закрывающие скобки / скобки. Была ли это просто ошибка вырезания или вставки или проблема с вашим Javascript? Это может объяснить противоречивое поведение.

1 голос
/ 17 декабря 2010

У меня была похожая проблема - в IE8 иногда возникают проблемы с применением стилей в контенте, загруженном функцией jjuery ajax. Я не знаю почему, но это помогло: 

$.ajax({
url: 'content.html',
success: function(data) {
   $('#content').html(data); //styles doeas not appear in ie8
   document.getElementById('content').innerHTML = data; /* ie8 - now it works oO */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...