javascript - 当您无法将 id 或图像属性添加到 src 图像 url 时，如何在聊天机器人 iframe 中制作图像、放大或点击全屏？

Question

我有一个正在使用 websdk 的聊天机器人，并且图像是通过 Oracle 的一个工具添加的，该工具不接受图像属性，您只需将图像 URL 放在正确的字段中。然而，图像被调整为微小的聊天机器人 iframe，我想知道如何在点击或悬停时放大它们。在工具之外，我可以应用 Javascript 和 CSS，但我无法编辑 HTML，因为它是由工具呈现的。这是该工具的外观，看看它如何不使用 HTML，您只需输入链接？甲骨文工具

我使用悬停 CSS 和那个词来放大图像，但图像仍然卡在 iframe 大小内，所以它不是一个真正的解决方案。

.oda-chat-card-image:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(2); /* Safari 3-8 */
  transform: scale(2);

悬停示例

我发现了一些将图像放入目标 div 的代码，该目标 div 是整个背景 iframe。我使用这个 iframe 在机器人建议的聊天位的背景中打开链接，以便使用的人保持在同一个窗口中。我喜欢，但它要求图像具有我无法添加的内联属性。

我想如果我可以使用一些 Javascript 将属性添加到所有图像中，我可以获得我想要的，但这似乎需要为图像添加唯一 ID，但这是我无法做到的。我想知道其他人可以提出哪些其他可能性。

这些图像确实有一个类，所以也许我可以以某种方式访问它们。这就是我能够应用悬停 CSS class=oda-chat-card-image 的方式

这是我尝试在我命名为 name="mainPageIframe" id="mainPageIframe" 的背景 iframe 中单击打开图像时使用的代码

const change = src => { 
    document.getElementById('mainPageIframe').src = src

如果我在浏览器中检查图像并手动添加

onclick="change(this.src)"

到图像的末尾，

由聊天机器人工具呈现的示例代码，但在我在 f12 检查图像时手动添加了 onclick 属性的位置进行了编辑。

<img dir="auto" class="oda-chat-card-image" src="https://eservice.xactware.com/esc/showme/images/Annotated/1379/Bot/X1ForgotPassword.png" onclick="change(this.src)" alt="Card image">

手动添加属性以产生我想要的结果的示例，然后当我单击它在背景 iframe 中打开的图像时。这样做是我能想到的最好的事情，但我宁愿将图像打开为整个屏幕上的放大叠加层，而不是困在 iframe 内。这就是为什么我认为将其复制到主页 iframe 将是一个解决方案。关于如何申请的任何想法

onclick="change(this.src)"

对我网页中没有唯一 ID 的所有图像，或者可能一起应用不同的解决方案？

这是我正在处理的可以编辑的 HTML 文件。它通过 URI 和 channelID 调用机器人内容。我能够将 CSS 应用于机器人和 Javascript 中的项目，我只是不知道如何让 bnot 中的图像弹出或超出聊天机器人 iframe 的一侧并放大。

 <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>ODA Live Chat Example</title>
    
    </head>
    <body>
        <iframe name="mainPageIframe" id="mainPageIframe" src="https://docs.oracle.com/en/cloud/paas/digital-assistant/index.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:0;">
            Your browser doesn't support iframes
        </iframe>
        <script src="https://polyfill.io/v3/polyfill.js?features=Number.isInteger%2Cdefault"></script>

<style>
        
        
.oda-chat-card-image:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(2); /* Safari 3-8 */
  transform: scale(2);


  
}       
.more
{
    display: none;
}
img {
    max-width: 100%;
    height: auto;
}

.oda-chat-conversation {
    background-color: #b3b8bd;
}
 
.oda-chat-left .oda-chat-message-bubble, .oda-chat-left .oda-chat-message-header, .oda-chat-left .oda-chat-message-footer, .oda-chat-card, .oda-chat-message-global-actions .oda-chat-action-postback {
    background-color: #2e5a81;

}

.oda-chat-message-actions {
    background-color: #1f3b54;
}

.oda-chat-message-global-actions .oda-chat-action-postback, .oda-chat-message-actions .oda-chat-action-postback {
    background-color: #1f3b54;
    margin: 0px;
    font-weight: normal;
}

.oda-chat-action-postback {
    background-color: #1f3b54;
}

.oda-chat-header {
    background-color: #1f3b54;
}
.oda-chat-footer {
    background-color: #1f3b54;
}
.oda-chat-card-image {
    max-width: 100%;
    height: auto;
}


.oda-chat-button {
    height: 20px;
    width: 100px;
    outline: none;
    background-color: transparent;
    box-shadow: none;
}

@media screen and (min-width: 769px){
  .oda-chat-button {
      height: 96px;
      width: 96px;
  }

        </style>
        
        <script>

const change = src => { 
    document.getElementById('mainPageIframe').src = src 
}


        
            //Function to toggle full pargraph showing
            function showHideParagraphs(lidx) {
                var dots = document.getElementById("dots"+lidx);
                var moreText = document.getElementById("more"+lidx);
                var btnText = document.getElementById("myBtn"+lidx);
                btnText.blur(); //loose focus

                if (dots.style.display === "none") {
                    dots.style.display = "inline";
                    btnText.innerHTML = "Read more";
                    moreText.style.display = "none";
                } else {
                    dots.style.display = "none";
                    btnText.innerHTML = "Show less";
                    moreText.style.display = "inline";
                }
            }

            //Function to split paragraphs with show more:
            var gidx = 0;
            function splitParagraph(txt) {
                var paragraphs = txt.split("\n\n");
                if (paragraphs.length > 1) {
                    var html = "<p>"+paragraphs[0]+'<span id="dots'+gidx+'">...</span></p><span id="more'+gidx+'" class="more">';
                    for (var idx = 1; idx < paragraphs.length; idx++) {
                        html += "<p>"+paragraphs[idx]+"</p>";
                    }
                    html += '</span><div class="oda-chat-message-actions"><button class="oda-chat-action-postback" onclick="showHideParagraphs('+gidx+')" id="myBtn'+gidx+'">Read more</button></div>';
                    gidx++;
                    return html;
                }
                else {
                    return txt;
                }
            }

            //For typing indicator for keepTurn messages
            var moreToCome = 0;
            var typingIndicatorSafeguard=null;
            function increaseMoreToCome(n){
                moreToCome += n;
                if (typingIndicatorSafeguard!=null){
                    clearTimeout(typingIndicatorSafeguard);
                }
                typingIndicatorSafeguard = setTimeout(function(){moreToCome=0;}, 30000); //In any case only keep generating typing indicators for 30 seconds
            }
            function decreaseMoreToCome(){
                if (moreToCome>0){
                    moreToCome--;
                    setTimeout(function() {Bots.showTypingIndicator(30);}, 0);
                }
            }
            //End of for typing indicator for keepTurn messages



            var delegate = {
                beforeDisplay: function(message) {
                    if (message.messagePayload.type=='text'){
                      //Split paragrahps with show-more
                      message.messagePayload.text = splitParagraph(message.messagePayload.text);
                    }

                    //Typing indicator for keepTurn messages
                    //Solution pending: https://bug.oraclecorp.com/pls/bug/webbug_edit.edit_info_top?rptno=30944113
                    if (message.messagePayload.text && message.messagePayload.text.match((/^((Greetings)|(Salutations)).*I am Artie/))){
                        increaseMoreToCome(2);
                    }

                    decreaseMoreToCome();
                    //End of typing indicator for keepTurn messages

                    return message;
                },
                beforeSend: function(message) {
                    //For typing indicator for keepTurn messages
                    moreToCome=0;
                    //End of for typing indicator for keepTurn messages
                    return message;
                }
            };

            var chatWidgetWebSettings = {
                URI: 'oda-12e973c924a245abbd61f357fbbe926a-da2.data.digitalassistant.oci.oraclecloud.com',
                channelId: 'a61c229b-5469-4ea0-b62c-686bc3c1ad76',
                enableClearMessage: true,
                enableLocalConversationHistory: true,
                enableTimestamp: true,
                enableAttachment: false,
                showTypingIndicator: true,              
                enableSpeech: true,
                enableBotAudioResponse: true,
                //openLinksInNewWindow: true, //Disabled as it's not really needed and is superseeding link onclick handler added through delegate.
                enableAutocomplete: true,
                disablePastActions: 'none',
                delegate: delegate,
                botButtonIcon: 'images/RbotIcon.png',
                botIcon: 'images/RbotIcon.png',
                logoIcon: 'images/RbotIcon.png',
                personIcon: 'images/personIcon.png',
                agentAvatar: 'images/woman2.png',
                i18n: { "en": { chatTitle: 'Oracle Digital Assistant',
                          chatSubtitle: "Help on digital assistant learning"
                        }
                },
                typingIndicatorTimeout: 30,
                messagePadding: '10px',
                //theme: WebSDK.THEME.redwood-dark,
                theme: 'redwood-dark',
                linkHandler: { target: 'mainPageIframe' },
                enableDraggableButton: true
                
            };

            function initSdk(name) {
                // Default name is Bots
                if (!name) {
                    name = 'Bots';
                }
                setTimeout(function (){
                    const Bots = new WebSDK(chatWidgetWebSettings); // Initiate library with configuration
                    Bots.on('widget:opened', function() {
                      console.log('Widget opened!');
                      if (Bots.getConversationHistory().messagesCount < 1){
                        console.log("Starting the conversation");
                        Bots.sendMessage('Hello', { hidden: true });
                      }

                    });
                    Bots.connect()                                  // Connect to server
                        .then(function (){
                            console.log("Connection Successful");
                        })
                        .catch(function (reason){
                            console.log("Connection failed");
                            console.log(reason);
                        });
                    window[name] = Bots;
                });
            }
        
        </script>

        <script src="files/web-sdk_21.02.js"  onload="initSdk()"></script>


        
    </body>
</html>

javascript - 当您无法将 id 或图像属性添加到 src 图像 url 时，如何在聊天机器人 iframe 中制作图像、放大或点击全屏？

0 回答 0

Related

Reference