Firefox 浏览器上的 Dialogflow Messenger 高度自定义问题

Question

我使用 dialogflow-ES 开发了一个聊天机器人信使。当我将它与我的 Wordpress 网站集成时，正如您在附加的 snapshop 中看到的那样，聊天窗口的高度与网站的导航栏重叠。

Customize the height of the chat widget of Dialogflow messenger integration

通过查看上面链接中的第一个答案，我更改了代码并成功实现了聊天机器人所需的自定义。但我现在遇到的问题是代码仅适用于 Google chrome 和 Edge 浏览器，它不适用于 Firefox。在浏览浏览器兼容性文档时，我发现“adpotedStyleSheets”功能在 Firefox 上不起作用。

On Google ChromeOn Firefox

这是测试服务器链接。您可以使用它检查差异。 http://3.137.86.206/testingbot.html

是否有任何可选方法来实现这一点，因为它适用于 Chrome 和 Firefox 浏览器？

这是我的代码

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function() {
    window.addEventListener('dfMessengerLoaded', function (event) {
        $r1 = document.querySelector("df-messenger");
        $r2 = $r1.shadowRoot.querySelector("df-messenger-chat");
        $r5 = $r2.shadowRoot.querySelector("df-message-list");

        var sheet = new CSSStyleSheet;
        sheet.replaceSync(`div.chat-wrapper[opened="true"] { height: 420px; width: 300px; }`); //To change Height and Width
        $r2.shadowRoot.adoptedStyleSheets = [ sheet ];

        var sheet3 = new CSSStyleSheet;
        sheet3.replaceSync(`#messageList .message {font-size:0.9em !important;}
         #messageList .message.bot-message {margin-right: 20px ;} 
         #messageList .message.user-message {margin-left: 20px; margin-top: 15px; margin-bottom: 6px;} 
         .message-list-wrapper.minimized #messageList {margin-right: -15px;} 
         .message-list-wrapper.minimized #dismissIcon {padding: 1px}`); //To change margin sizes of user and bot messages
        $r5.shadowRoot.adoptedStyleSheets = [ sheet3 ];

        var sheet5 = new CSSStyleSheet;
        sheet5.replaceSync(`button#widgetIcon .df-chat-icon {height: 56px; width: 56px; left: 0px; top:0px;}`); //To change chat icon 
        $r1.shadowRoot.adoptedStyleSheets = [ sheet5 ];    
    });
});

</script>

Answer 1

我一直在做大量的研究来尝试解决这个问题，并且我找到了一种为所有浏览器定制它的方法。 styleSheet 构造函数目前仅受 Google Chrome 支持。

我推荐这种方法在跨浏览器的聊天机器人组件中创建 CSS 自定义。

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('df-messenger-loaded', function () {
        $r1 = document.querySelector("df-messenger");
        $r2 = $r1.shadowRoot.querySelector("df-messenger-chat");

        var style = document.createElement( 'style' );
        style.innerHTML = 'div.chat-wrapper[opened="true"]{height:480px;max-height:480px;}';
        $r2.shadowRoot.appendChild( style );
});