Twitter Embedded Timeline Callback

Question

Tôi đã thực hiện rất nhiều nghiên cứu về Lịch trình nhúng của Twitter. Tôi đã cố gắng tìm hiểu xem liệu có thể biết thời gian tải xong và hiển thị trên trang hay không. Điều này issue has been requested, nhưng vẫn chưa được thực hiện. Tôi đã đi đến một kết thúc chết một am hy vọng ai đó có thể giúp tôi tìm ra giải pháp. Dưới đây là những gì tôi đã tìm thấy cho đến nay:

Mã này để thêm một Timeline Embedded:

<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> 

gì sẽ xảy ra khi kịch bản được điều hành:

1. Các kịch bản thay thế thẻ <a> với một phần tử .

2. Nội dung của iframe đã sẵn sàng, nhưng hình đại diện và nút 'follow @username' không được tải xuống xong. Thuộc tính height của iframe được đặt thành 0 để bạn không thấy nội dung mà không có hình ảnh.

3. Hình ảnh đại diện được tải xuống, nhưng nút 'follow @username' vẫn đang được tải xuống. Nội dung vẫn không hiển thị.

4. Nút 'follow @username' đã hoàn tất tải xuống. Thuộc tính height của iframe được đặt để phù hợp với chiều cao của nội dung của iframe. Dòng thời gian hiện có thể nhìn thấy.

Bây giờ, tôi đã thử tất cả mọi thứ tôi có thể nghĩ ra để tìm ra khi thời gian được hiển thị (mà không sử dụng setTimeout/interval). Mục đích là để có một sự kiện/chức năng/cuộc gọi lại không bỏ phiếu. Dưới đây là những gì tôi đã cố gắng cho đến nay nhưng không thành công:

• Thiết thính giả sự kiện trên iframe (như onload, DOMContentLoaded, DOMFrameContentLoaded, vv) để biết khi nào nội dung đã tải xong. Điều này không hoạt động do iframe không có thuộc tính src. Sau khi đi qua các mã xấu xí (tôi đã không thể tìm thấy một phiên bản không nén), tôi đoán là nó đang sử dụng viết để thêm nội dung vào phần thân của iframe.
• Đặt trình xử lý sự kiện để biết thời điểm các thay đổi thuộc tính height trên số iframe. Về mặt lý thuyết, sự kiện này sẽ kích hoạt ba lần: đầu tiên khi nội dung tải, thứ hai khi height được đặt thành 0 và thứ ba khi height được đặt để hiển thị dòng thời gian được tải đầy đủ. Tuy nhiên, tôi chỉ có thể có được sự kiện để bắn cho hai trường hợp đầu tiên và không bao giờ cho các thứ ba (một trong những tôi thực sự muốn). Tôi đã sử dụng DOMSubtreeModified, onreadystatechange và onpropertychange, nhưng chỉ DOMSubtreeModified làm việc để kích hoạt sự kiện.
• Đặt trình xử lý sự kiện trên các cotet của iframe. Vì JavaScript có thể truy cập vào bên trong của iframe từ Twitter, bạn có thể lấy bất kỳ phần tử nào bên trong iframe (chẳng hạn như document hoặc window). Tuy nhiên, thêm onload, DOMContentLoaded hoặc DOMFrameContentLoaded trình xử lý sự kiện trên window hoặc document của số iframe vẫn không kích hoạt các sự kiện đó.
• Đặt trình xử lý sự kiện trên nút 'theo dõi @ tên người dùng'. Nút thực sự là một iframe có thuộc tính src. Bằng cách đặt sự kiện onload, sự kiện sẽ bị kích hoạt khi được tải. Tuy nhiên, sự kiện onload sẽ luôn kích hoạt hai lần. Lần đầu tiên khi tải xuống xong và lần thứ hai khi quá trình xử lý hoàn tất. Ngay sau lần kích hoạt thứ hai, dòng thời gian sẽ được hiển thị. Để thực hiện điều này khá là hack mặc dù tôi đoán tất cả mọi thứ là vì bạn phải đợi nội dung của iframe để tải, tiếp cận bên trong và nhận được 'follow @username' iframe, đặt sự kiện onload trên đó, sau đó đợi sự kiện thứ hai để bắn.
• Sử dụng chức năng twttr.widgets.createTimeline(), có tham số tùy chọn cho gọi lại. Tuy nhiên, gọi lại được gọi khi nội dung đã sẵn sàng (bước 2), nhưng không phải khi khung nội tuyến hiển thị (bước 4).

Có thể còn một vài kết hợp khác mà tôi đã quên tại thời điểm này. Tôi biết có một số github gist sử dụng Twitter widget.js, nhưng thêm gọi lại cho nó. Tôi không thể làm việc này được.

Xin lỗi vì câu hỏi đăng nhập, nhưng tôi hy vọng ai đó có thể trợ giúp. Cảm ơn.

Answer 1

Khi bạn sao chép và dán đoạn mã bạn nhận được từ Twitter, bạn phải thay thế này:

<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> 

với điều này:

<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> 

Tất nhiên, hàm doSomething được gọi là ở trên là cuộc gọi lại chạy khi dòng thời gian nhúng của bạn tải và hiển thị.

Ngoài ra, tôi đoán giải pháp này không hoạt động trong Internet Explorer vì nó không hỗ trợ sự kiện onLoad cho phần tử tập lệnh. Yet there are solutions for that.

Cuối cùng, bạn có thể thấy cách tiếp cận của mình cho vấn đề này trong the Twitter embedded timeline scraper I wrote.

Answer 2

Tôi sẽ bài giải pháp của tôi ở đây ngay cả khi nó được 1month chỉ trong trường hợp ai đó tìm thấy bài này một lần nữa, những gì tôi phải làm là để thăm dò ý kiến ​​cho đến khi iframe có chiều rộng> 1 như một chỉ báo cho callback

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

Bạn có thể thử sử dụng nhà máy Javascript thay vì liên kết thuộc tính. Phương thức createTimeline trả về một lời hứa để bạn có thể kết nối các hoạt động tải bài đăng của mình ở đó. Xem tài liệu twitter: 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(); 
});