Lazy Load Reddit Widgets

Question

Я пытаюсь асинхронно (или лениво загружать) этот виджет Reddit, но у меня проблема.

Вот основной код, который отлично работает, когда непосредственно в HTML:

<script src="http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&amp;t=all&amp;sort=new&amp;style=off" type="text/javascript"></script> 

Если я пытаюсь двигаться, что более в моем scripts.js где я выполнить другие вещи JQuery, он заканчивает тем, что переписывать весь DOM с виджет. Я знаю, что загрузка этого src в браузере показывает, что код, который выполняется, начинается с document.write. Поэтому я предполагаю, что, поскольку он потеряет опорный пункт, он переписывает все окно.

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

$('.redditdiv').html('<script src="http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&amp;t=all&amp;sort=new&amp;style=off" type="text/javascript"></script>'); 

Другая неудачная попытка:

var redditscript = document.createElement('SCRIPT'); 
redditscript.type = 'text/javascript'; 
redditscript.async = true; 
redditscript.src = 'http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&t=all&sort=new&style=off'; 
$('.redditdiv').append(redditscript); 

Если у кого есть предположение, что было бы весьма удивительным. Благодаря!

P.S. Бонусный вопрос: Есть ли у кого-нибудь предложение для этого виджета Twitter?

<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 6000,width: 'auto',height: 300, theme: {shell: {background: '#ffffff',color: '#000000'},tweets: {background: '#ffffff',color: '#606060',links: '#4476cc'} }, features: {scrollbar: false,loop: false,live: false,hashtags: false,timestamp: true,avatars: false,behavior: 'all'} }).render().setUser('skattertech').start(); 
</script> 

Answer 1

Адаптация сценария от вопроса, упомянутого Мэтью Flaschen, мы можем использовать что-то вроде этого:

var content = ''; 
document.write = function(s) { 
    content += s; 
}; 

$.getScript('http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&t=all&sort=new&style=off', function(){ 
    $('body').append(content); 
}); 

Мы используем функцию $.getScript, которая специально предназначена для динамической загрузки скриптов. Второй параметр - это загруженный обратный вызов, поэтому функция, переданная функции, будет выполняться при загрузке.

Вы должны заменить селектор 'body' любым необходимым элементом. С другой стороны, если вам не нужен JQuery,

var s = document.createElement('script'), 
    content = ''; 

s.src = 'http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&t=all&sort=new&style=off'; 

document.write = function(s) { 
    content += s; 
}; 

s.onload = function(){ 
    document.getElementById('reddit').innerHTML = content; 
}; 

document.getElementsByTagName('head')[0].appendChild(s); 

См: http://jsfiddle.net/8yg9x/ для версии JQuery и http://jsfiddle.net/d95xh/ для обычной версии Javascript

Answer 2

Вы можете использовать

<script src='//redditjs.com/subreddit.js'></script> 

или если вы хотите для использования большего количества опций. Подробная информация о вариантах вы найдете here.

<script src='//redditjs.com/subreddit.js' data-subreddit='aww' data-height='400' data-width='330' data-sort='hot' data-theme='dark' data-subreddit-mode='small' ></script> 

В итоге результат будет выглядеть следующим образом.

http://i.imgur.com/YczjBJD.png