Twitter Collection embed in Cordova mobile App for iOS - blank iFrame


#1

Hello,

sorry for using a semi-correct forum but I figure a cordova App is close enough to a website to make it the best fit.

I am trying to embed a collection I created into a cordova based app. It works well in the browser and on Android Devices but does not work in die iOS Emulator.

I added the twitter JS loading to the head of the document:

<script>
    window.twttr = (function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
            t = 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) {
        t._e.push(f);
    };

    return t;
}(document, "script", "twitter-wjs"));
</script>

Added a widget:

<div id="twitter-widget">
        <a class="twitter-timeline"
           data-theme="dark"
           data-widget-id="<id>"
           data-chrome="noheader transparent">
        </a>
    </div>

And create the widget once twitter is loaded:

twttr.ready(
            function (twttr) {
                twttr.widgets.load(document.getElementById("twitter-widget"));

                twttr.events.bind(
                    'rendered',
                    function (event) {
                        <do something>
                    }
                );
            }
        );

While on android and in chrome this displays the widget on iOS it is not show, also the “rendered” event is never triggered on iOS but triggered on Android. When I inspect the generated iframe in safari it is empty:

<div id="twitter-widget">
        <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="position: absolute; visibility: hidden;">#document<html><head></head><body></body></html></iframe><a class="twitter-timeline" data-theme="dark" data-widget-id="<id>" data-chrome="noheader transparent" data-twttr-rendered="true">
        </a>
    </div>

I can see no errors in the safari console or while debugging. The twitter scripts are loaded correctly, nothing is blocked. twttr is an object as is twttr.widgets, twttr.widgets.load is a function that seems correct. Loading the widget withtout a divid and therefor loading all widgets in the doom also does not work.

From google searches it seems as if this problem exists since the beginning of time but I can not find a discussion newer than 2013/2014 and was wondering if maybe something changed? I am at a loss and would appreciate any help.


Embed Twitter not working in ios cordova app
#2