Вкратце: Комментарии Facebook Виджет загружается при первом обращении к странице, после чего он больше не загружается. Мне нужен способ для сценария и что-то еще, чтобы он был выполнен снова, как будто он был выполнен при первом доступе страницы.Facebook Комментарии Виджет загружен с помощью Angular 2
Объяснение: Я хочу, чтобы отобразить Facebook комментарий виджет в нижней части одного сообщения в блоге, это работает, но когда я вернусь позже в блоге или любом другом блоге по этому вопросу ФБ Виджет делает не загружать/показывать. Руководство, которое я Ниже Facebook Developers Comment Widget
Что у меня есть:
Выдержка из маршрутизации:
const routes: Routes = [
{
path: '',
component: BlogComponent,
children: [
{
path: ':slug',
pathMatch: 'full',
loadChildren:() => PostModule
},
{
path: '',
loadChildren:() => PostsModule
}
]
}
];
Выдержка из post.component.html (OLD):
<div [innerHtml]="post.html"></div>
<div id="fb-root"></div>
<div class="fb-comments" [attr.data-href]="currentURL" data-numposts="5"></div>
Выписка из post.component.ts (OLD):
...
export class PostComponent implements AfterViewInit{
...
ngAfterViewInit(){
this.initFBComments();
}
initFBComments(){
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
}
Проблема: Как я уже говорил, это работает, но только при первом доступе к странице. Когда я возвращаю FB-SDK, который был загружен в первый раз, уже существует, и ничего не выполняется (так как if (d.getElementById(id)) return;
выполняется)
изменения я сделал: Я пробовал много разных вещей, от использования ngOnInit, ngAfterViewChecked даже функция, вызванная событием клика. Проблема в том, что ничего не загружается, потому что уже загружен SDK (из-за ленивой загрузки).
Если я немного изменил код, чтобы html был добавлен динамически и запустил некоторый код из SDK, я могу заставить его снова извлечь данные, но все же он не отображается из-за того, что он установил высоту виджет до 0
, а также он имеет класс widget fb_hide_iframes
.
Как файлы теперь:
Выписка из post.component.html (NEW):
<div [innerHtml]="post.html"></div>
<div #fbComments></div>
Выписка из post.component.TS (NEW):
...
declare var window: any;
export class PostComponent implements AfterViewInit{
@ViewChild('fbComments') elementRef: ElementRef;
...
ngAfterViewInit(){
this.initFBComments();
}
initFBComments(){
//Add the html tags dynamically.
this.renderer.setElementProperty(this.elementRef.nativeElement, 'innerHTML', '<div id="fb-root"></div><div class="fb-comments" data-href="'+this.currentURL+'" data-numposts="5"></div>');
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)){
window.FB.XFBML.parse(); //Instead of returning, lets call parse()
}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
}
Результаты:
Когда доступ к странице 1-й раз:
<div _ngcontent-bbg-8="" id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -10000px; height: 0px; width: 0px;">...</div>
<div style="position: absolute; top: -10000px; height: 0px; width: 0px;">...<div>
</div>
<div _ngcontent-bbg-8="">
<div class="fb-comments fb_iframe_widget" data-href="localhost/blog/testing" data-numposts="5" fb-xfbml-state="rendered">
<span style="height: 944px; width: 550px;"><iframe ...></iframe></span>
</div>
</div>
Когда страница используется 2-й раз:
<div _ngcontent-bbg-8="" id="fb-root"></div>
<div _ngcontent-bbg-8="">
<div class="fb-comments fb_iframe_widget_loader fb_iframe_widget fb_hide_iframes" data-href="localhost/blog/testing" data-numposts="5" fb-xfbml-state="rendered">
<span style="height: 100px; width: 550px;"><iframe ...</iframe></span>
</div>
</div>
Что такое 'this.renderer', ссылаясь на? в методе 'InitFBCommnets()'? – xerotolerant