嵌入式推文和 instagram 帖子在 ionic 4 中只能查看一次？

Question

负责渲染 Instagram 和 Twitter 块引用的脚本似乎只运行ning 一次。

当导航到另一个包含 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 中导航到同一页面时，页面的源代码不会重新呈现，因为在浏览器中检查很清楚。

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

我终于找到了解决办法！

有人在 Angular 中提出了 Twitter 嵌入的解决方案，并且在 ionic 中有效！

解决方法是将Twitter widget的实例保存到(<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 内容之前触发！

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

所以，我曾尝试在填充 HTML 内容后等待 200 毫秒，然后调用函数，它工作很有魅力。

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

成功！

嵌入式推文和 instagram 帖子在 ionic 4 中只能查看一次？

Embedded tweets and instagram posts are viewed only once in ionic 4?

twitter

instagram

ionic4