instagram 嵌入在动态附加到页面时首先不起作用，但在刷新后起作用

Question

访问： http: //staging2.ju.blog.kylebaker.io/

点击汉堡

点击“时间轴”

Instagram 嵌入仅显示灰色徽标，并且无法完全加载。在网络选项卡中观看时，embed.js 似乎未加载。

现在，单击刷新。

现在，一切都加载了。embed.js 就在那里。

:/

您可以注意到http://staging.ju.blog.kylebaker.io上的旧版本工作正常 - 这似乎显然是因为它是一个全新的页面加载（我想避免）。

该主题依赖一些潜在相关的代码将此页面“加载到”页面中：

    L: function(url, f, err) {
        if (url == xhrUrl) {
            return false;
        }
        xhrUrl = url;
        if (xhr) {
            xhr.abort();
        }
        xhr = $.ajax({
            type: 'GET',
            url: url,
            timeout: 10000,
            success: function(data) {
                f(data);
                xhrUrl = '';
            },
            error: function(a, b, c) {
                if (b == 'abort') {
                    err && err()
                } else {
                    window.location.href = url;
                }
                xhrUrl = '';
            }
        });
    },
    HS: function(tag, flag) {
        var id = tag.data('id') || 0,
            url = tag.attr('href'),
            title = tag.attr('title') + " - " + $("#config-title").text();

        if (!$('#preview').length || !(window.history && history.pushState)) location.href = url;
        Diaspora.loading()
        var state = {d: id, t: title, u: url};
        Diaspora.L(url, function(data) {
            if (!$(data).filter('#single').length) {
                location.href = url;
                return
            }
            switch (flag) {
                case 'push':
                    history.pushState(state, title, url)
                    break;
                case 'replace':
                    history.replaceState(state, title, url)
                    break;
            }
            document.title = title;
            $('#preview').html($(data).filter('#single'))
            switch (flag) {
                case 'push':
                    Diaspora.preview()
                    break;
                case 'replace':
                    window.scrollTo(0, 0)
                    Diaspora.loaded()
                    break;
            }
            setTimeout(function() {
                Diaspora.player();
                $('#top').show();
                comment = $("#gitalk-container");
                if (comment.data('ae') == true){
                    comment.click();
                }
            }, 0)
        })
    },
    preview: function() {
        // preview toggle
        $("#preview").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
            var previewVisible = $('#preview').hasClass('show');
            if (!!previewVisible) {
                $('#container').hide();
            }else{
                $('#container').show();
            }
            Diaspora.loaded();
        });
        setTimeout(function() {
            $('#preview').addClass('show');
            $('#container').data('scroll', window.scrollY);
            setTimeout(function() {
                $('#preview').css({
                    'position': 'static',
                    'overflow-y': 'auto'
                });
            }, 500);
        }, 0);
    },

（完整文件请参见：https://github.com/Fechin/hexo-theme-diaspora/blob/master/source/js/diaspora.js）

我看到 DOM 中加载了 script 标签；为什么没有加载？感觉这一定是我错过的一些简单的东西......现在是凌晨 4 点，我一直在不停地工作。

（请忽略灰尘，这是一个正在进行的小型副项目，有很多小东西坏了。）

我尝试过的事情：

• 添加代码以在页面中手动加载 embed.js。（没有变化 - 然后我看到 embed.js 已加载，但它对结果没有影响）
• 编辑 URL 以在“//insta...”url 之前包含“http:”（正如其他地方的一些答案中为某些人建议的那样）（没有更改）
• window.instgrm.Embeds.process()该对象似乎instgrm不再存在。（不用找了）

似乎与通过 jquery 注入有关，但我对细节有点困惑，我想我会问世界并为下一个可怜的灵魂留出答案的空间。

请注意，由于我已经尝试过，这里的答案似乎没有帮助或相关，尽管也许这只是我在凌晨 4 点的空白。

Answer 1

事实上，问题是我已经解决过的事情，我只是错过了一些让更改生效的渲染​​细节。jQuery 执行和剥离脚本标签似乎是问题的根源，window.instgrm.Embeds.process()在确保embeds.js在正确的位置/正确的时间请求脚本后，在适当的时间调用，足以解决上面看到的问题。造成混乱的部分原因是使用 hexo，它在 Node 中使用 ejs，这似乎并不允许客户端在 ejs 模板文件本身中默默地执行内联 JS。