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

Dialogflow messenger height customization issue on Firefox browser(Firefox浏览器上的Dialogflow Messenger高度自定义问题)

问题描述

我已经开发了一个使用对话流的聊天机器人信使。当我将它与我的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>

推荐答案

我做了很多研究，试图解决这个问题，我找到了一种为所有浏览器自定义它的方法。 样式表构造函数当前仅受Google Chrome支持。

我建议使用此方法在Chatbot组件中为跨浏览器创建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 );
});

这篇关于Firefox浏览器上的Dialogflow Messenger高度自定义问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！