Нужно ли здесь использовать функцию обратного вызова, или есть другой способ?


Вот соответствующий код:

index.html

<!--  DOM INITIALIZATION -->
<script type="text/javascript">
$().ready(function() {

getThemeInfo();

if (themeSelect==2) {
   ReplaceJSCSSFile("css/skin1.css", "css/skin2.css", "css");   // overwrite CSS
}

AJAX_LoadResponseIntoElement("skinContainer", "skin" + themeSelect + ".txt", function() {
    AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
    });

});
</script>

funcs.js

function initPage()
{
    setContentDimensions();
    replaceCSSMenu();
    showContainer();
    setContentPositions();
}

function setContentPositions()
{
    var contentTop = findTop(document.getElementById('NavMenu')) + 4;
    var contentLeft = findLeft(document.getElementById('kwick1')) + 226;

    document.getElementById('contentdiv').style.top = (contentTop)+ "px";
}

Краткое содержание: он выбирает выбор темы, а если это не значение по умолчанию (1), то изменения в файл CSS, чтобы skin2.УСБ. Затем он выбирает страницы с помощью AJAX и инициализирует его, и часть инициализации устанавливает размеры и положение дел.

Хотя тема подкачки работает отлично через кнопку (код не показан здесь) это не работает в опере, если тема настройки сохраняются в файлах cookie, является темой по умолчанию, вызывающие CSS, чтобы быть заменены во время загрузки страницы (т. е. этот код здесь.) По какой-то причине .верхней и .осталось от моей "contentdiv", который находится в ContentPositions (функция), является неправильным.

Я бы предположил, что это происходит потому, что CSS стили не были загружены ранее на JavaScript, при попытке установить позицию contentdiv по. Чтобы проверить эту теорию, я поставил оповещение() в setContentPositions (), чтобы проверить, что contentTop & contentTop действительно были неправы (они,) а затем еще одно предупреждение() после строки инициализации дом, что изменения в CSS-файл. С добавлением предупреждение() после изменения CSS в инит дом, он прекрасно загружает.

Почему же CSS-файл не обрабатывается на раз, два Аякса пригоняют? Функция обратного вызова правильный способ, чтобы исправить это?

Редактировать...

Код для некоторых функций, используемых в коде выше было предложено. Вот это:

function ReplaceJSCSSFile(oldfilename, newfilename, filetype){
 var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none";
 var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none";
 var allElements=document.getElementsByTagName(targetelement);

 for (var i=allElements.length; i>=0; i--){
  if (allElements[i] && allElements[i].getAttribute(targetattr)!=null && allElements[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
   var newelement=CreateJSCSSFile(newfilename, filetype);
   allElements[i].parentNode.replaceChild(newelement, allElements[i]);
  }
 }
}

function CreateJSCSSFile(filename, filetype){
 if (filetype=="js"){
  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", filename);
 }
 else if (filetype=="css"){
  var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", filename);
 }
 return fileref;
}



function AJAX_LoadResponseIntoElement (elementId, fetchFileName, cfunc) {
  var XMLHRObj;
  if (window.XMLHttpRequest) { XMLHRObj=new XMLHttpRequest(); }
    else { XMLHRObj=new ActiveXObject("Microsoft.XMLHTTP"); }

  XMLHRObj.onreadystatechange=function()
    {
    if (XMLHRObj.readyState==4 && XMLHRObj.status==200)
      {
      document.getElementById(elementId).innerHTML=XMLHRObj.responseText;
      cfunc();
      }
    }
  XMLHRObj.open("GET",fetchFileName,true);
  XMLHRObj.send();
}


382
2
задан 8 февраля 2011 в 09:02 Источник Поделиться
Комментарии
1 ответ

Я бы предложил другой подход. Это сложно, чтобы получить обратного вызова для полной загрузки таблицы стилей CSS динамически загружен: увидеть это переполнение стека вопрос Для справки:

Есть в любом случае, прислушиваться к событию onload для элемента?

Не использовать JavaScript, чтобы установить положение содержание: это часть стилизации и должно быть сделано в CSS. Не роли свои скины CSS для изменения внешнего вида страницы?

1
ответ дан 14 февраля 2011 в 01:02 Источник Поделиться