Встроенные твиты и сообщения в Instagram просматриваются только один раз в ioni c 4? - PullRequest
Новая
       15

Встроенные твиты и сообщения в Instagram просматриваются только один раз в ioni c 4?

0 голосов
/ 12 января 2020

Похоже, что скрипты, отвечающие за рендеринг блочных цитат в 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;

Как сделать так, чтобы скрипты всегда отображали цитаты?!

1 Ответ

1 голос
/ 26 января 2020

Внедрения в Twitter и Instagram отображаются функциями twttr.widgets.load() и instgrm.Embeds.process() соответственно, где эти функции запускаются при событии «onload» сценариев, отвечающих за встраивание Twitter и Instagram.

Я заметил, что при переходе на ту же страницу в ioni c исходный код страницы не перерисовывается, как это видно из проверки в браузере.

Я пытался вызвать функции (<any>window)twttr.widgets.load() и (<any>window)instgrm.Embeds.process() в ionViewWillEnter(), ionViewDidEnter() и ngAfterViewInit(), но в результате возникла ошибка "невозможно прочитать виджеты свойств undefined"!

Наконец-то я нашел решение!

Кто-то предложил решение для встраивания Twitter в Angular, и оно сработало в c! { ссылка }

Решение состоит в том, чтобы сохранить экземпляр виджета Twitter в объекте (<any>window), чтобы иметь возможность снова вызывать принадлежащую ему функцию.

Я применил ту же логику c к встраиваниям в 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();

Для меня встраивания в Twitter и Instagram не отображаются даже при вызове функций после назначения HTML!

Это синхронизация проблема, поскольку кажется, что функции запускаются непосредственно перед загрузкой динамического c HTML содержимого!

Я пытался вызывать функции после div, которому я добавляю ему содержимое HTML загружен. <div (load)="render()" [innerHTML]="htmlContent"></div> но похоже, что div не имеет события load в ioni c!

Итак, я попытался подождать 200 мс после заполнения содержимого HTML, а затем вызвать функции, и это работал как шарм. 

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

УСПЕХ !

...