Вы помещаете ссылку на файл twitter js в разметку, которую добавляете одновременно с размещением ссылки на объект в этом сценарии.Для загрузки этого файла twitter js требуется примерно секунда, но браузер все равно анализирует ваш встроенный скрипт.
, поэтому первое, что нужно сделать, это удалить ссылку на скрипт twitter из переменной разметки.возьмите его, используя $ .getScript (), и добавьте разметку с обратным вызовом из $ getScript, чтобы он запускал вашу строку только после того, как js из twitter достигнет браузера.что-то вроде.
var content = (
'<div class="contentArea visible" id="fb">FB Content Area</div>'+
'<div class="contentArea" id="twit"><script>new TWTR.Widget({version: 2,type: \'profile\',rpp: 4,interval: 6000,width: 250,height: 280,theme: {shell: {background: \'#333333\',color: \'#ffffff\'},tweets: {background: \'#ffffff\',color: \'#444444\',links: \'#e02046\'}},features: {scrollbar: false,loop: false,live: false,hashtags: true,timestamp: true,avatars: false,behavior: \'all\'}}).render().setUser(\'CSuitesIndepend\').start();</script></div>'+
'<div class="contentArea" id="youtube">Youtube Video</div>'+
'<div class="contentArea" id="yelp">Yelp reviews</div>'+
'<div class="contentArea" id="ta">Trip Advisor Advice</div>'+
'<div class="contentArea" id="li">The Linked In Page</div>'
);
$.getScript("http://widgets.twimg.com/j/2/widget.js",function(){
// dynamically add the get social sidebar
$('body').prepend('<div id="social"><div id="outer"><span><img src="getSocial.png" alt="Get Social" />' +
'<ul id="icons"><li><img class="tiny" src="fb.png" alt="Facebook" /></li>'+
'<li><img class="tiny" src="twit.png" alt="Twitter" /></li></ul></span>'+
'</div><div id="inner"><div id="innest"><div id="message">Get Social With Comfort Suites!</div>'+
'<div id="close"><a id="closeB" href="#">X</a></div><ul class="idTabs">'+
imgs +'</ul>'+content +'</div></div></div>');
});
Но я бы смиренно предложил переместить этот встроенный скрипт из строки, которую вы добавляете в DOM, и поместить его прямо в обратный вызов, что позволит вам более аккуратнопередать ему переменные, предполагая, что вы хотите отправить опции своему плагину.Этот последний вариант даст вам
var content = (
'<div class="contentArea visible" id="fb">FB Content Area</div>'+
'<div class="contentArea" id="twit"></div>'+
'<div class="contentArea" id="youtube">Youtube Video</div>'+
'<div class="contentArea" id="yelp">Yelp reviews</div>'+
'<div class="contentArea" id="ta">Trip Advisor Advice</div>'+
'<div class="contentArea" id="li">The Linked In Page</div>'
);
$.getScript("http://widgets.twimg.com/j/2/widget.js",function(){
// dynamically add the get social sidebar
$('body').prepend('<div id="social"><div id="outer"><span><img src="getSocial.png" alt="Get Social" />' +
'<ul id="icons"><li><img class="tiny" src="fb.png" alt="Facebook" /></li>'+
'<li><img class="tiny" src="twit.png" alt="Twitter" /></li></ul></span>'+
'</div><div id="inner"><div id="innest"><div id="message">Get Social With Comfort Suites!</div>'+
'<div id="close"><a id="closeB" href="#">X</a></div><ul class="idTabs">'+
imgs +'</ul>'+content +'</div></div></div>');
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 280,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#e02046'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
})
.render()
.setUser('CSuitesIndepend')
.start();
});
, который имеет дополнительный бонус, который вам не нужен, чтобы избежать кавычек, и jsHint (или любой другой) также оценит этот сценарий.
Наконецрассмотрим этот способ создания разметки с помощью jQuery.Это делает изменения более лёгкими, чтобы их можно было найти в различных версиях контроля версий.Просто личное предпочтение.
Надеюсь, это поможет.
Обновление:
Похоже, когда виджет создается (новый TWTR.Widget)он вызывает .init () и запоминает, где он встроен в страницу, и тут же вставляет нужный ему HTML-код.так как мы вызываем его в сценарии в заголовке, он помещает его в корень документа, перезаписывая все остальное.
Попробуйте инкапсулировать вызов "new TWITR.Widget" внутри функции, а затем вызвать егоФункция из встроенного скрипта в вашей разметке, где вы хотите, чтобы виджет появился.Таким образом, переменные по-прежнему находятся за пределами разметки, и все, что находится во встроенном скрипте, это ссылка на функцию в вашем скрипте головы.
, так что теперь у вас есть функция где-то вроде
var makeTwitterWidget = function () {
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 280,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#e02046'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
})
.render()
.setUser('CSuitesIndepend')
.start();
});
}
и переменная содержимого выглядит следующим образом:
var content = (
'<div class="contentArea visible" id="fb">FB Content Area</div>'+
'<div class="contentArea" id="twit"><script>makeTwitterWidget();</script></div>'+
'<div class="contentArea" id="youtube">Youtube Video</div>'+
'<div class="contentArea" id="yelp">Yelp reviews</div>'+
'<div class="contentArea" id="ta">Trip Advisor Advice</div>'+
'<div class="contentArea" id="li">The Linked In Page</div>'
);