Ionic twitter embedded timeline disappears

Ionic Framework ionic-v3
1

I have the code shown below, however after the user leaves the view the time line disappears?

The first time we go to the view the timeline is present but when we return the view disappears.

Here is my code

In Index.html

  <!-- Timeline Twitter -->
  <script src="http://platform.twitter.com/widgets.js"></script>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

In twitter.html

<ion-content>
    <ion-grid >
        <ion-row>
            <!--Timeline Twitter -->
            <a id="twitter" class="twitter-timeline"
               data-tweet-limit="10"
               data-chrome="noscrollbar nofooter"
               href="https://twitter.com/UnivLaRochelle">Tweet de L'université de la Rochelle</a>
        </ion-row>
    </ion-grid>
</ion-content>

In twitter.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-twitter',
    templateUrl: 'twitter.html',
})
export class twitterPage {

    constructor(public navCtrl: NavController) {

    }
    ngAfterViewInit() {
        !function(d,s,id){
            var 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");
    }
}

I tried several ways but I have not found any solution, can someone help me?

2

You solved this? i have the same issue, researched but i couldn’t find anything

3

It worked when I made the

   if(!d.getElementById(id)){

as true. :no_mouth:

1 Like
4

Right It worked when i removed that if.

I also imported the widget as async
<script async src="http://platform.twitter.com/widgets.js"></script>

Thanks!!

1 Like
5

Ye, I found the solution, replace ngAfterViewInit with this one

!function(d,s,id){
        var js: any,
            fjs=d.getElementsByTagName(s)[0],
            p='https';
            js=d.createElement(s);
            js.id=id;
            js.src=p+"://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
    }
    (document,"script","twitter-wjs");
1 Like