2011-12-31 2 views
0

Я уверен, что это окажется глупой штукой, но здесь идет с тех пор, как я новичок в JavaScript.Загрузите внешний html в загрузку div-страниц, затем погаснет

Я пытаюсь загрузить содержимое внешнего HTML в моей странице индекса, так что в моем index.html я это Див, в которую я хочу, чтобы загрузить HTML:

<div id="topdiv"> 
</div><script> 
     $('#topdiv').load("/widgets/2-0.html"); 
</script>` 

и здесь содержание 2-0.html, что я пытаюсь загрузить, он загружает на себя в браузере, у меня есть 3 этот элемент управления (официальный твиттер виджет):

<div style="float:right; margin:5px;"> 
    <script src="http://widgets.twimg.com/j/2/widget.js"></script> 
    <script> 
     new TWTR.Widget({ version: 2, type: 'search', search: '#abbaseya', interval: 15000, subject: 'widget', width: 300, height: 360, 
     theme: { shell: {  background: '#8ec1da',  color: '#ffffff' }, 
     tweets: {  background: '#ffffff',  color: '#444444',  links: '#1985b5' } }, 
     features: { scrollbar: true, loop: true, live: true, behavior: 'default' } 
     }).render().start(); 
    </script> 
</div> 

Но я не могу получить он загружается в мой div на странице index.html. Может ли кто-нибудь помочь?

EDIT1: Я попытался изменить DIV и положить сценарий ПОСЛЕ ДИВ был загружен

<div id="topdiv" style="height:500px;width:100%;"> 


     </div> 
     <script>$('#topdiv').load("/widgets/2-0.html");</script> 

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

EDIT2: Я поместил функцию .load в функцию $ (document) .ready, теперь когда страница загружается, внешний html полностью заменяет мой index.html

+0

Убедитесь, что это правильный путь к файлу. Откройте консоль и проверьте, какую ошибку вы получаете. – Purag

+0

Я поместил оба файла вместе в одну папку, теперь страница загружается на пару секунд, затем идет весь белый = ( – KamalSalem

+0

javascript console говорит, что все компоненты должны быть на месте – KamalSalem

ответ

4

Ваш скрипт выполняется до #topdiv. Вы должны либо поместить его после <div> или просто использовать обработчик:

$(document).ready(function() { 
    $('#topdiv').load("/widgets/2-0.html"); 
}); 
+0

Я пробовал ваше решение, все еще не вижу моего внешнего 2-0.html – KamalSalem

+0

@ user974038: Можете ли вы опубликовать ссылку на веб-сайт или [jsFiddle] (http://jsfiddle.net/)? Или обновите свой вопрос с помощью нового кода? – Ryan

+0

Я обновил свой вопрос с новым кодом и поведением – KamalSalem

1

Я считаю, что виджет использует document.write(), чтобы сделать сам, который означает, что он должен быть вызван, когда страница рендеринга, то есть должен быть вызван до загрузки страницы.

Вызов document.write() после загрузки страницы заставляет всю страницу переписываться.

Вы можете переписать JavaScript для самого виджета, чтобы он не использовал document.write(), но это может приложить определенные усилия.

Если у вас есть опция, вы можете использовать серверную часть вместо того, чтобы загружать внешний файл с помощью JavaScript.

Смежные вопросы