Wczytanie na oś czasu w wiadomościach e-mail oddzwonionych pod numer

Question

Zrobiłem wiele badań na temat Osadzonych list wątków Twittera. Próbowałem dowiedzieć się, czy można dowiedzieć się, kiedy kończy się ładowanie osi czasu, a na stronie wyświetla się , wyświetlając. To issue has been requested, ale jeszcze nie zostało wdrożone. Dotarłem do ślepego zaułka, mając nadzieję, że ktoś może mi pomóc znaleźć rozwiązanie. Oto co znalazłem do tej pory:

Kod dodać wbudowanego Czas:

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR- WIDGET-ID-HERE">Tweets by @twitterapi</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

Co się dzieje, gdy skrypt jest uruchamiany:

1. Skrypt zastępuje tag <a> z element .

2. Zawartość iframe jest gotowa, ale obraz awatara i przycisk "follow @username" nie są pobierane. Atrybut iframe "height jest ustawiony na 0, więc nie widzisz treści bez obrazów.

3. Awatar obraz zostanie pobrany, ale przycisk „wykonaj @username” jest nadal pobierany. Treść nadal nie jest widoczna.

4. Przycisk 'śledzić @username' zakończeniu pobierania. Atrybut iframe 'height jest ustawiony tak, aby odpowiadał wysokości zawartości iframe. Oś czasu jest teraz widoczna.

Teraz próbowałem wszystko mogę myśleć, aby dowiedzieć się, kiedy oś czasu jest widoczna (bez użyciu setTimeout/interwał). Celem jest uzyskanie zdarzenia/funkcji/wywołania niezwiązanego z odpytywaniem. Oto, co starałem dotąd bez powodzenia:

• Ustawianie detektory zdarzeń na iframe (takich jak onload, DOMContentLoaded, DOMFrameContentLoaded itp), aby wiedzieć, kiedy zawartość zakończeniu ładowania. To nie działa, ponieważ atrybut iframe nie ma atrybutu src. Po przejściu przez wulgaryzowany kod (nie mogłem znaleźć wersji nieskompresowanej), przypuszczam, że używa on zapisu, aby dodać treść do treści iframe.
• detektory zdarzeń Ustawienie wiedzieć, kiedy zmienia atrybut height na iframe. Teoretycznie zdarzenie to powinno wystrzelić trzykrotnie: najpierw przy ładowaniu zawartości, po drugie, gdy height jest ustawione na 0, a trzecie, gdy height jest ustawione, aby pokazać w pełni załadowaną oś czasu. Mogłem jednak wydać to wydarzenie tylko w dwóch pierwszych przypadkach, a nigdy za trzecim (tym, którego faktycznie chciałem). Użyłem DOMSubtreeModified, onreadystatechange i onpropertychange, ale tylko DOMSubtreeModified pracował do wypalania zdarzenia.
• Ustawianie detektorów zdarzeń na podstawie pozycji iframe. Ponieważ JavaScript może osiągnąć wewnątrz iframe z Twittera, to jest możliwe, aby pobrać dowolny element wewnątrz iframe (takich jak document lub window). Jednak dodawanie detektorów zdarzeń , DOMContentLoaded lub DOMFrameContentLoaded nadal nie wywołuje tych zdarzeń.
• Ustawianie detektorów zdarzeń na przycisku "follow @ username". Przycisk faktycznie jest iframe, który ma atrybut src. Ustawiając zdarzenie onload, zostanie ono uruchomione, gdy zostanie załadowane. Jednak zdarzenie onload zawsze będzie strzelać dwa razy. Po raz pierwszy po zakończeniu pobierania i drugim po zakończeniu przetwarzania. Natychmiast po drugim wyzwoleniu zostanie wyświetlona oś czasu. Wdrożenie tego jest jednak dość hackowe (wydaje mi się, że wszystko jest w porządku), ponieważ musisz poczekać aż zawartość iframe załaduje się, dotrzeć do środka i uzyskać "follow @username" iframe, ustawić na nim zdarzenie , a następnie poczekać na drugie wydarzenie na ogień.
• Korzystanie z funkcji twttr.widgets.createTimeline(), która ma opcjonalny parametr dla wywołania zwrotnego. Jednak wywołanie zwrotne jest wywoływane, gdy zawartość jest gotowa (krok 2), ale nie wtedy, gdy widoczna jest pozycja iframe (krok 4).

Prawdopodobnie jest jeszcze kilka kombinacji, o których w tym momencie zapomniałem. Wiem, że istnieje github gist, który używa Twittera widget.js, ale dodaje do niego wywołania zwrotne. Nie mogłem tego zmusić do działania.

Przepraszamy za pytanie w dzienniku, ale mam nadzieję, że ktoś może pomóc. Dzięki.

Answer 1

Podczas kopiowania i wklejania kodu otrzymasz od Twittera, trzeba wymienić to:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'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");</script> 

z tym:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doSomething()});");fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

Oczywiście, funkcja doSomething, o której mowa powyżej, jest twoją funkcją zwrotną, która działa, gdy wbudowana oś czasu ładuje i renderuje.

Również, myślę, że to rozwiązanie nie działa w Internet Explorerze, ponieważ nie obsługuje zdarzeń onLoad dla elementów skryptu. Yet there are solutions for that.

Ostatnie, możesz zobaczyć moje podejście do tego problemu w the Twitter embedded timeline scraper I wrote.

Answer 2

będę po moje rozwiązanie tu nawet gdyby to było 1 miesiąc tylko w przypadku czyimś znajdzie ten post znowu, co musiałem zrobić, to sondowanie aż iframe miał szerokość> 1 jako wskaźnik zwrotnego

if ($('.twitter-timeline').length) { 
    //Timeline exists is it rendered ? 
    interval_timeline = false; 
    interval_timeline = setInterval(function(){ 
     console.log($('.twitter-timeline').width()); 
     if ($('.twitter-timeline').hasClass('twitter-timeline-rendered')) { 
      if ($('.twitter-timeline').width() > 10) { 
       //Callback 
       clearInterval(interval_timeline); 
       DoWhatEverYouNeedHere(); 
      }  
     } 
    },200); 
} 

Answer 3

Możesz spróbować użyć fabryki JavaScript zamiast wiązania atrybutów. Metoda createTimeline zwraca obietnicę, dzięki czemu możesz połączyć swoje działania związane z obciążaniem postów. Zobacz dokumentację Twitterze: https://dev.twitter.com/web/embedded-timelines/parameters

twttr.widgets.createTimeline(
    "YOUR-WIDGET-ID-HERE", 
    document.getElementById("container"), 
    { 
     height: 400, 
     chrome: "nofooter", 
     linkColor: "#820bbb", 
     borderColor: "#a80000" 
    } 
) 
.then(function(){ 
     DoSomething(); 
});