Изменение расположения вставки DOM виджета Drift - PullRequest
Новая
       64

Изменение расположения вставки DOM виджета Drift

0 голосов
/ 14 июня 2019

У меня есть приложение Vue.js, в котором используется инструмент чата Drift (см .: https://www.drift.com/).. Проблема, с которой я столкнулся, заключается в том, что фрагмент кода Drift Javascript вставляет #drift-widget-container внизу моего тега body т.е. вне моего #app контейнера.

В результате это означает, что я не могу использовать ни один из моих пользовательских плагинов Vue для управления положением и видимостью виджета. Например, раскрыть на свитке ...

Мой вопрос, довольно просто: кто-нибудь знает, как я могу сказать Дрифту вставить виджет в целевой DOM-узел вместо конца тега body?

Я ценю, что есть простое, но грязное исправление, но в идеале я бы хотел избежать этого:

  • После инициализации Vue, используя document.getElementById, переместите виджет в мой #app контейнер - Обновление - Это не работает, так как перемещение его в DOM портит отслеживание виджетов.

код дрейфа

Это код, который Дрифт просит включить в заголовок сайта. Из того, что я вижу, он просто загружает необходимый JS-код и затем запускает виджет чата. 

"use strict";

!function() {
    var t = window.driftt = window.drift = window.driftt || [];
    if (!t.init) {
        if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
        t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ],
            t.factory = function(e) {
                return function() {
                    var n = Array.prototype.slice.call(arguments);
                    return n.unshift(e), t.push(n), t;
                };
            }, t.methods.forEach(function(e) {
            t[e] = t.factory(e);
        }), t.load = function(t) {
            var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
            o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
            var i = document.getElementsByTagName("script")[0];
            i.parentNode.insertBefore(o, i);
        };
    }
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('XXX'); // This is what initiates the widget

Метод drift.load (не путать с функцией load, это загружает их JS) - это то, что запускает виджет и помещает его в DOM. Я попытался провести обратный инжиниринг их кода, поскольку документация по API жалкая, и из того, что я вижу, нет возможности указать другой элемент для добавления.

Вы можете увидеть их полный код здесь - (вам нужно будет "украсить" его по мере его минимизации)

Из того, что я нашел, я думаю, что это очень маловероятно, что это действительно возможно. Единственное решение - использовать document.getElementById внутри моего компонента Vue, а затем просто манипулировать стилями оттуда. Это не конец света, но он не особенно чистый ...

...