HTML – 如何在没有转推的情况下嵌入Twitter时间线？

要使用hacky样式注入，只需在脚本标记中放入以下代码即可。这会将https://platform.twitter.com/widgets.js脚本标记放入您的页面，因此您不再需要将其作为单独的脚本标记。

// widgets script loading taken from Twitter
window.twttr = (function (d,s,id) {
    var js,fjs = d.getElementsByTagName(s)[0],t = window.twttr || {};
    if (d.getElementById(id)) return;
    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"));

twttr.ready(function (twttr) {
    twttr.events.bind("rendered",function (event) {
        var widgetFrame = event.target;
        var retweets = widgetFrame.contentDocument.querySelectorAll('div.timeline-Tweet--isRetweet');
        retweets.forEach(function (node) {
            if (node.parentNode) { // (in)sanity check
                node.parentNode.style = 'display: none;' // hide entire parent li tag
            }
        })
    });
});

备注它

我们将父节点作为每个div.timeline-Tweet – isRetweet位于li标签中，它为您提供边框，因此您在隐藏转推后会留下一些奇怪的双边框。我认为没有办法通过CSS选择器到达父级，所以我们必须用代码来做到这一点。

另一个评论

黑客攻击强烈依赖于时间线内容的结构方式，而这些内容可能会在没有Twitter通知的情况下发生变化，因此您在这里冒险，有一天您会醒来，并且在您的时间线中转发回来;)

更新

好的，这里是v2，它听取了关于ol的更新…但是在写完之后我开始理解弗兰肯斯坦博士的感受;)

window.twttr = (function (d,function (event) {
        var frameDoc = event.target.contentDocument;

        // initially hide retweets
        var hideRetweets = function () {
            var retweets = frameDoc.querySelectorAll('div.timeline-Tweet--isRetweet');
            retweets.forEach(function (node) {
                if (node.parentNode && node.parentNode.style !== 'display: none;') { // (in)sanity check
                    node.parentNode.style = 'display: none;' // hide entire parent li tag
                }
            });
        };

        hideRetweets();

        // Twitter widget emitts no events on updates so we hook up ourselves to ol element to listen on it for additions of children
        var watcher = new MutationObserver(function (mutations) {
            // check whether new tweets arrived
            var hasNewTweets = mutations.some(function (mutation) {
                return mutation.addedNodes.length > 0;
            });
            if (hasNewTweets) {
                hideRetweets(); // rescan all tweets as it is easier
            }
        });
        watcher.observe(frameDoc.querySelector('ol.timeline-TweetList'),{ childList: true });
    });
});