代码之家  ›  专栏  ›  技术社区  ›  Kyle Baker

Instagram Embed在动态附加到页面时最初不起作用,但在刷新后起作用。

  •  0
  • Kyle Baker  · 技术社区  · 6 年前

    去: 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中加载了脚本标记;为什么不加载?感觉这一定是我错过的简单的东西…现在是凌晨4点,我一直在不停地工作。

    (请忽略灰尘,这是一个正在进行的小项目,许多小东西都坏了。)

    我尝试过的事情:

    • 添加代码以在页面中手动加载embed.js。(没有变化——然后我看到embed.js已加载,但它不会对结果产生影响)
    • 编辑url以包括“http:”在“//insta…”url之前(as 在其他地方为某些人推荐的答案中(无变化)
    • window.instgrm.Embeds.process() 似乎是 instgrm 对象不再存在。(无变化)

    不过,这似乎与jquery注入的信息有关,但我对细节有点困惑,我想我应该向世界提问,为下一个可怜的灵魂提供一个生存的空间。

    注意,由于我所做的努力,答案 here 似乎没有什么帮助或相关的,虽然也许只是我在凌晨4点空白。

    0 回复  |  直到 6 年前
        1
  •  0
  •   Kyle Baker    6 年前

    问题是,事实上,我已经解决了一些问题,我只是错过了一些让更改保持不变的渲染细节。jquery执行和剥离脚本标记似乎是问题的根源,并调用 window.instgrm.Embeds.process() 在适当的时候,在确保 embeds.js 脚本是在正确的位置/正确的时间请求的,足以解决上述问题。部分混乱是使用了hexo,它在节点中使用了EJS,这似乎不允许客户机在EJS模板文件中自己悄悄地执行内联JS。