如何从 JavaScript 脚本在新选项卡中打开 url

Question

我正在使用 peekabot 开发一个聊天机器人（下面提供了文档和官方示例的链接），并且希望能够在新选项卡中打开一个 URL（因为您可以选择使用纯 html）当用户点击一个选项。与此相关的是生成的 URL 按钮样式错误（鼠标悬停时显示为空白，没有标签文本）。

我在下面包含了整个脚本的上下文，但我指的是：

6: {
            text: 'You should check it out on test preview',
            options: [{
                text: "PREVIEW THIS LINK",
                url: "www.google.com"
            }]
        },

以上是选项 6，点击它后，用户应该转到 URL（例如 google.com），但在新标签中打开，并且也不是空白（由于某种原因，悬停时按钮链接为空白）

我尝试过：url: "www.google.com" target="_blank（见下文），但这会破坏整个 javascript 代码。

6: {
                text: 'You should check it out on test preview',
                options: [{
                    text: "PREVIEW THIS LINK",
                    url: "www.google.com" target="_blank
                }]
            },

我也试过了：

url: "www.google.com target="_blank" 

和

url: "www.google.com target=_blank"

都不行。

如需回答：

1. 在新标签页中打开 URL 的解决方案
2. 更正，使按钮链接（用于 URL）在悬停时不为空白。 （当您将鼠标从按钮链接上移开时，会出现文字）

这是官方网站 - https://peekobot.github.io/peekobot/ 但即使在他们的示例中也令人恼火 - GitHub 的 URL 在同一个选项卡中打开。

下面的整个脚本的上下文：

</script>
<script type="text/javascript" src="<?php echo base_url(''); ?>js/bot.js>v=1"></script>

<script>
const chat = {
    1: {
        text: 'Some Text here',
        options: [{
            text: 'More Text here',
            next: 101
        },
     {
            text: '??',
            next: 201
        }
        ,
         {
            text: '?????',
            next: 301
        }   
    ]
    },
    101: {
        text: 'Some information here,
        options: [{
            text: 'That is great, thanks!',
            next: 102
        },
        {
            text: 'I would like some more info please.',
            next: 103
        }]
    },
    102: {
        text: 'Thanks and Goodbye',
        url: siteurl + "index.php/student/test",
        options: [{
            text: 'Bye and thank you.',
            next: 3
        },
        {
            text: 'I would like some more info please.',
            next: 104
        }]
    },
    103: {
        text: 'Info here',
        options: [{
            text: 'That is great, thanks!',
            next: 103
        },
        {
            text: 'I would like some more info please.',
            next: 104
        }]
    },
    5: {
        text: 'Aah, you\'re missing out!',
        next: 6
    },
    6: {
        text: 'You should check it out on test preview',
        options: [{
            text: "Go to PRIVIEW",
            url: "www.google.com"
        }]
    },
    
};


const bot = function () {

    const peekobot = document.getElementById('peekobot');
    const container = document.getElementById('peekobot-container');
    const inner = document.getElementById('peekobot-inner');
    let restartButton = null;

    const sleep = function (ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    };

    const scrollContainer = function () {
        inner.scrollTop = inner.scrollHeight;
    };

    const insertNewChatItem = function (elem) {
        //container.insertBefore(elem, peekobot);
        peekobot.appendChild(elem);
        scrollContainer();
        //debugger;
        elem.classList.add('activated');
    };

    const printResponse = async function (step) {
        const response = document.createElement('div');
        response.classList.add('chat-response');
        response.innerHTML = step.text;
        insertNewChatItem(response);

        await sleep(1500);

        if (step.options) {
            const choices = document.createElement('div');
            choices.classList.add('choices');
            step.options.forEach(function (option) {
                const button = document.createElement(option.url ? 'a' : 'button');
                button.classList.add('choice');
                button.innerHTML = option.text;
                if (option.url) {
                    button.href = option.url;
                } else {
                    button.dataset.next = option.next;
                }
                choices.appendChild(button);
            });
            insertNewChatItem(choices);
        } else if (step.next) {
            printResponse(chat[step.next]);
        }
    };

    const printChoice = function (choice) {
        const choiceElem = document.createElement('div');
        choiceElem.classList.add('chat-ask');
        choiceElem.innerHTML = choice.innerHTML;
        insertNewChatItem(choiceElem);
    };

    const disableAllChoices = function () {
        const choices = document.querySelectorAll('.choice');
        choices.forEach(function (choice) {
            choice.disabled = 'disabled';
        });
        return;
    };

    const handleChoice = async function (e) {

        if (!e.target.classList.contains('choice') || 'A' === e.target.tagName) {
            // Target isn't a button, but could be a child of a button.
            var button = e.target.closest('#peekobot-container .choice');

            if (button !== null) {
                button.click();
            }

            return;
        }

        e.preventDefault();
        const choice = e.target;

        disableAllChoices();

        printChoice(choice);
        scrollContainer();

        await sleep(1500);

        if (choice.dataset.next) {
            printResponse(chat[choice.dataset.next]);
        }
        // Need to disable buttons here to prevent multiple choices
    };

    const handleRestart = function () {
        startConversation();
    }

    const startConversation = function () {
        printResponse(chat[1]);
    }

    const init = function () {
        container.addEventListener('click', handleChoice);

        restartButton = document.createElement('button');
        restartButton.innerText = "Restart";
        restartButton.classList.add('restart');
        restartButton.addEventListener('click', handleRestart);

        container.appendChild(restartButton);

        startConversation();
    };

    init();
}

bot();
</script>

更新：

根据以下建议，我已经尝试过：

if (step.options) {
            const choices = document.createElement('div');
            choices.classList.add('choices');
            step.options.forEach(function (option) {
                const button = document.createElement(option.url ? 'a' : 'button');
                button.classList.add('choice');
                button.innerHTML = option.text;
                if (option.url) {
                    button.href = option.url;
            if (option.target) {
      button.target = option.target;
                } else {
                    button.dataset.next = option.next;
                }
                choices.appendChild(button);
            });
            insertNewChatItem(choices);
        } else if (step.next) {
            printResponse(chat[step.next]);
        }
    };

这会破坏整个代码，因此聊天机器人根本无法运行。

Answer 1

我的想法是你必须修改代码或让作者为你修改代码。

我在看这里的主要js代码：https://github.com/Peekobot/peekobot/blob/master/peekobot.js

这个sn-p就是我正在看的：

step.options.forEach(function (option) {
                const button = document.createElement(option.url ? 'a' : 'button');
                button.classList.add('choice');
                button.innerHTML = option.text;
                if (option.url) {
                    button.href = option.url;
                } else {
                    button.dataset.next = option.next;
                }
                choices.appendChild(button);
            });

我想最后一部分会变成这样。

if (option.url) {
   button.href = option.url;
   if (option.target) {
      button.target = option.target;
   }
} else {
...