instagram embed сначала не работает при динамическом добавлении на страницу, но затем работает после обновления - PullRequest
0 голосов
/ 21 апреля 2019

Перейдите к: 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:" перед URL "// insta ..." (как рекомендуется для некоторых людей в некоторых ответах в других местах) (без изменений)
  • window.instgrm.Embeds.process() кажетсяобъект instgrm больше не существует.(без изменений)

Кажется, что это связано с тем, как это вводится с помощью jquery, но я немного запутался в том, что касается специфики, подумал, я бы попросил мир и освободить место дляответ существует для следующей бедной души.

Обратите внимание, что из-за того, что я попробовал, ответы здесь не кажутся полезными или актуальными, хотя, может быть, это просто я не замечаю4 am.

1 Ответ

0 голосов
/ 22 апреля 2019

Проблема, действительно, заключалась в том, что я уже рассмотрел, я просто пропустил некоторые детали рендеринга при получении изменений. JQuery, выполнение и удаление тегов сценария, кажется, является источником проблемы, и вызова window.instgrm.Embeds.process() в соответствующее время, убедившись, что сценарий embeds.js был запрошен в нужном месте / в нужное время, было достаточно для исправить проблему, замеченную выше. Частично путаница заключалась в использовании hexo, который использует ejs в узле, который, по-видимому, на самом деле не позволяет клиенту выполнять встроенный JS в самих файлах шаблонов ejs.

...