嵌入的推文和instagram帖子在ionic 4中仅查看一次？

Question

似乎负责呈现Instagram和Twitter块引用的脚本仅运行一次。

[导航到包含Twitter或Instagram块引用的另一个页面时，可以正确查看嵌入的iframe，但是当导航到同一页面时，不呈现块引用！

这就是我包含相应脚本的方式：

  twitterPosts = function (d, s, id) {
    let js: any,
      fjs = d.getElementsByTagName(s)[0],
      p = 'https';

    if (!d.getElementById(id)) {
    js = d.createElement(s);
    js.id = id;
    js.src = p + "://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);
     }
  }(document, "script", "twitter-wjs");

  instagramPosts = function (d, s, id) {
    let js: any;
    let fjs = d.getElementsByTagName(s)[0];

    if (!d.getElementById(id)) {
    js = d.createElement(s);
    js.setAttribute("onLoad", "window.instgrm.Embeds.process()");
    js.id = id;
    js.src = "https://platform.instagram.com/en_US/embeds.js";

    fjs.parentNode.insertBefore(js, fjs);
    }
  }(document, "script", "instagram-wjs");

 ionViewWillEnter() {
    ...
    this.instagramPosts;
    this.twitterPosts;
...
}

ionViewWillLeave() {
    this.removeScript();
  }

removeScript() {
    let fjs = document.getElementsByTagName('script')[0];
    fjs.parentElement.removeChild(document.getElementById('instagram-wjs'));
  }

[我还试图在添加包含块引号的HTML内容后运行这些脚本：

this.htmlContent = this.domSanitizer.bypassSecurityTrustHtml(this.post.content);

this.instagramPosts;
this.twitterPosts;

我如何使脚本始终呈现块引用？！

Answer 1

[Twitter和Instagram嵌入分别由函数twttr.widgets.load()和instgrm.Embeds.process()呈现，其中这些函数在负责嵌入Twitter和Instagram的脚本的“ onload”事件上触发。

我已经注意到，以ionic导航到同一页面时，该页面的源代码不会重新呈现，因为从浏览器中进行检查很明显。

我曾尝试在(<any>window)twttr.widgets.load()，(<any>window)instgrm.Embeds.process()和ionViewWillEnter()中调用ionViewDidEnter()和ngAfterViewInit()函数，但出现错误“无法读取未定义的属性小部件”！

最后，我找到了解决方法！

有人为Angular中的Twitter嵌入提出了一种解决方案，并且该解决方案在ionic中起作用！https://stackoverflow.com/a/43048814/10533962

解决方案是将Twitter小部件的实例保存到(<any>window)对象，以便能够再次调用其所属的函数。

我在Instagram嵌入上应用了相同的逻辑，并且有效！

这是我的最终代码：

  twitterRender() {
    (<any>window).twttr = (function (d, s, id) {
      let js: any, fjs = d.getElementsByTagName(s)[0],
        t = (<any>window).twttr || {};
      if (d.getElementById(id)) return t;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);

      t._e = [];
      t.ready = function (f: any) {
        t._e.push(f);
      };

      return t;
    }(document, "script", "twitter-wjs"));

    if ((<any>window).twttr.ready())
      (<any>window).twttr.widgets.load();
  }

  instagramRender() {
    (<any>window).instagram = function (d, s, id) {
      let js: any;
      let fjs = d.getElementsByTagName(s)[0],
        i = (<any>window).instagram || {};

      if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.setAttribute("onLoad", "window.instgrm.Embeds.process()");
        js.id = id;
        js.src = "https://platform.instagram.com/en_US/embeds.js";

        fjs.parentNode.insertBefore(js, fjs);

        i._e = [];
        i.ready = function (f: any) {
          i._e.push(f);
        };

        return i;
      }
    }(document, "script", "instagram-wjs");

    if ((<any>window).instagram.ready())
    (<any>window).instgrm.Embeds.process();
  }

ionViewDidEnter() {
instagramRender();
twitterRender();
}

但是，当从API获取数据并像这样动态注入HTML代码时：

this.htmlContent = domSanitizer.bypassSecurityTrustHtml(this.postContent);
instagramRender();
twitterRender();

对我来说，即使在HTML分配后调用函数，也没有呈现Twitter和Instagram嵌入！

这是一个同步问题，因为似乎函数在动态HTML内容加载之前就被触发了！

我尝试在将其注入HTML内容的div之后调用函数。 <div (load)="render()" [innerHTML]="htmlContent"></div>，但似乎div在ionic中没有“加载”事件！

因此，我尝试在填充HTML内容后等待200毫秒，然后调用函数，并且它像魅力一样工作。

setTimeout(() => {
      this.twitterRender();
      this.instagramRender();
   }, 200);

成功！