如何从 JavaScript 脚本在新标签页中打开 url

Question

我正在使用 peekabot 开发一个聊天机器人（link 下面提供了文档和官方示例），并希望能够在新选项卡中打开 URL（就像您拥有option to do using plain 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）但在新选项卡中打开并且也不是空白（按钮 link 由于某种原因悬停时是空白的）

我试过：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"

都不行。

回答：

在新标签页中打开 URL 的解决方案
更正按钮 link（对于 URL）在悬停时不是空白。（当您将鼠标移离按钮link时，出现文字）

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

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

</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

这个片段就是我正在看的：

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 {
...

如何从 JavaScript 脚本在新标签页中打开 url

How to open url in new tab from JavaScript script

html

javascript

url

target