Facebook评论Widget懒惰加载Angular 2

问题描述 投票:2回答:2

简而言之:Facebook评论窗口小部件仅在第一次访问页面时加载,之后它不再加载。我需要一种方法让脚本和其他任何东西再次执行,就像第一次访问页面时一样。

说明:我想在单个博客文章的底部显示Facebook评论小部件,这是有效的,但是当我稍后回到博客文章或任何其他博客文章时,FB Widget不会加载/显示。我关注的指南是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甚至是一个在click事件上调用的函数。问题是没有加载,因为已经下载了SDK(因为延迟加载)。

如果我稍微更改代码以便动态添加html并从SDK运行一些代码我可以让它再次获取数据,但由于它已将小部件的高度设置为0并且仍未显示它也有widget fb_hide_iframes类。

文件现在如何:

从post.component.html中提取(新):

<div [innerHtml]="post.html"></div>
<div #fbComments></div>

从post.component.ts中提取(新):

...
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'));        
  }
}

结果:

第一次访问页面时:

<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>

第二次访问页面时:

<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>
angular lazy-loading facebook-comments
2个回答
0
投票

因此,下载的SDK中的第一行是:try {window.FB|| ...

因此,通过添加:

ngOnDestroy() {
  delete window.FB;
}

解决了一切。 Facebook的SDK现在可以在每次加载时执行所有操作,就像之前不存在一样


0
投票

作为@Hendri回答的后续内容,我只想提及

delete window.FB;

我还必须删除'facebook-jssdk'元素,否则它不会重新加载。竞争代码:

ngOnDestroy() {
  (function (d, s, id) {
    let js, fjs = d.getElementsByTagName(s)[0];
    let jssdk = d.getElementById(id);
    if (jssdk)
      fjs.parentNode.removeChild(jssdk);
    delete window.FB;
  })(document, 'script', 'facebook-jssdk');
}
© www.soinside.com 2019 - 2024. All rights reserved.