如何将脚本标签注入标题？答案

【问题标题】：How to inject script tag into header?如何将脚本标签注入标题？
【发布时间】：2021-10-25 00:06:01
【问题描述】：

背景
我正在使用 ZenDesk 的 Web Widget (Classic) 在页面上显示受限内容。根据文档

您可以通过定义一个 window.zESettings 对象。确保在 Web Widget（经典）sn-p。

这意味着必须在加载脚本之前设置window.zESettings。 Web Widget (Classic) sn-p 使用脚本 URL 加载看起来像 https://static.zdassets.com/ekr/snippet.js?key=xyz

要在小部件内显示受限内容，我必须将 jwt 令牌设置为 window.zESettings，这需要在加载脚本之前进行。 jwt 令牌是在服务器上生成的。

Zendesk 预计需要设置 window.zESettings 并且需要在每个页面上加载脚本。这有点荒谬，因为 90+% 的时间用户不会在页面上使用 Zendesk 帮助。

问题
当用户点击按钮时，我想按需执行。

$("#myHelpWidget").click(function () {            
        window.zESettings = {
            webWidget: {
                authenticate: {
                    jwtFn: function (callback) {
                        // Fetch your jwt token and then call our supplied callback below.
                        $.ajax({
                            type: "POST",
                            url: "/myaccount/jwtticket"
                        })
                            .done(function (data, textStatus, jqXHR) {
                                callback(data.Token);
                            })

                    }
                },
                contactForm: {
                    attachments: true,
                    fields: [
                        { id: 'name', prefill: { '*': 'foo bar' } },
                        { id: 'email', prefill: { '*': 'foobar@example.com' } }
                    ]
                }
            }
        };

        // dynamically create script tag here
        var s;
        s = document.createElement('script');
        s.id = "ze-snippet";
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(s);
        s.type = 'text/javascript';
        s.src = "https://static.zdassets.com/ekr/snippet.js?key=xyz";
        
        
        //ERROR:  Get error at line below  zE is not defined ****
        zE('webWidget', 'show'); 
        zE('webWidget', 'open');
        zE('webWidget:on', 'close', function () {
            zE('webWidget', 'hide');
        });
                    
    })

上面的代码抛出错误zE is not defined。有没有办法将脚本标签注入标头并等待其完全加载。 （请注意，jQuery 的 $.getScript 不起作用。）

【问题讨论】：

嗨，不确定这是否会引起您的兴趣develop.zendesk.com/hc/en-us/community/posts/…

标签： javascript jquery zendesk zendesk-api

【解决方案1】：

将所有zE 调用放入script.load 事件中：

var s;
s = document.createElement('script');
s.id = "ze-snippet";
var head = document.getElementsByTagName("head")[0];
head.appendChild(s);
s.type = 'text/javascript';
s.src = "https://static.zdassets.com/ekr/snippet.js?key=xyz";

s.onload = function() {
     zE('webWidget', 'show'); 
     zE('webWidget', 'open');
     zE('webWidget:on', 'close', function () {
         zE('webWidget', 'hide');
     });
}

【讨论】：