0

我有一个使用 Drift 聊天工具的 Vue.js 应用程序（参见：https ://www.drift.com/ ）。我遇到的问题是 Drift Javascript 片段在我的标签#drift-widget-container底部插入了 ，即在我的容器之外。body#app

因此，这意味着我无法使用任何自定义 Vue 插件来操纵小部件的位置和可见性。例如，滚动显示...

body我的问题很简单，是否有人知道我可以告诉 Drift 将小部件插入目标 DOM 节点而不是标签末尾的方法？

我很欣赏有一个简单但肮脏的修复可用，但我最好避免这样做：

  • 初始化 Vue 后，使用document.getElementById将小部件移动到我的#app容器中 -更新- 这不起作用，因为在 DOM 中移动它会扰乱小部件跟踪。

漂移码

这是 Drift 要求您包含在网站头部的代码。据我所知，它只是加载了他们必要的 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 组件中使用，然后从那里操作样式。这不是世界末日，但也不是特别干净……

4

0 回答 0