Bootstrap + popover - Skype href 链接不起作用

Question

我有以下 PHP + HTML：

                <div class="row justify-content-center" id="grid">
                    <?php
                    $result = $conn->query("SHOW TABLES from vmvelevp_roster");
                    while($tableName = mysqli_fetch_row($result)) {
                        $table = $tableName[0];
                        $sql2 = "SELECT * FROM $table";
                        $result2 = mysqli_query($conn, $sql2);
                        while ($row = mysqli_fetch_assoc($result2)) {
                        echo '<figure class="picture-item mr-2">';
                        echo '<img src="img/employees-img/' . $row['picname'] . '" ';
                        echo 'class="img-fluid rounded-circle" ';
                        echo 'data-toggle="popover" ';
                        echo 'data-placement="bottom" ';
                        echo 'title="' . $row['name'] . '" ';
                        echo "data-content='";
                        if (!empty($row['position'])) {
                            echo "<b>Position:</b> " . $row['position'] . "<br />";
                        }
                        if (!empty($row['department'])) {
                            echo "<b>Department:</b> " . $row['department'] . "<br />";
                        }
                        if (!empty($row['email'])) {
                            echo "<b>E-Mail:</b> <a href=mailto:" . $row['email'] .">" . $row['email'] . "</a><br />";
                        }
                        if (!empty($row['phoneinternal'])) {
                            echo "<b>Phone Internal:</b> " . $row['phoneinternal'] . "<br />";
                        }
                        if (!empty($row['phoneexternal'])) {
                            echo "<b>Phone External:</b> " . $row['phoneexternal'] . "<br />";
                        }
                        if (!empty($row['skype'])) {
                            echo "<b>Skype:</b> " . $row['skype'];
                            echo '<a href="skype:charie.brown?chat">Chat</a>';
                            echo "' ";
                        } else {
                            echo "' ";
                        }
                        echo 'alt="...">';
                        echo '<div class="picture-item__details">';
                        echo '<figcaption class="picture-item__title">' . $row['name'] . '</figcaption>';
                        echo '</div>';
                        echo '</figure>';
                    }
                }
                    ?>
                </div>

电子邮件href 显示完美，但Skype href 未显示。

我想知道如何解决这个问题？

我关于弹出框的 javascript：

jQuery(document).ready(function() {
    $("[data-toggle=popover]").each(function(i, obj) {
        $(this).popover({
            html: true,
            trigger: "manual"
        });
    }).on('mouseenter', function() {
        var _this = this;
        $(this).popover('show');
        $('.popover').on('mouseleave', function() {
            $(_this).popover('hide');
        });
    }).on('mouseleave', function() {
        var _this = this;
        setTimeout(function() {
            if (!$('.popover:hover').length) {
                $(_this).popover('hide');
            }
        }, 50);

这是我的结果：

有什么办法可以解决这个问题吗？

这很奇怪，因为 href 在有电子邮件时起作用，但在它是 Skype 链接时不起作用。我尝试将代码发布到不同的文件（只有 hrefs）中，PHP 连接到我的数据库，它运行良好。

编辑： 只是一个简短的解释。应该为单个事物呈现的确切代码是：

<img src="img/employees-img/xxx.jpg" class="img-fluid rounded-circle" data-toggle="popover" data-placement="bottom" title="" data-content="<b>Position:</b> xxx<br /><b>Department:</b> xxx<br /><b>E-Mail:</b> <a href=mailto:peter@xxx.com>peter@xxx.com</a><br /><b>Phone External:</b> +xxx<br /><a href="skype:charie.brown?chat">Chat</a>" alt="..." data-original-title="xxx">

如果我将其粘贴到不同的文档中，则 href 正在工作。

Answer 1

最新版本的 Bootstrap 似乎包含一个用于安全 URL 的清理程序，而 Skype 不是其中之一。您可以阅读有关此here的更多信息

为了解决这个问题，您可以在上面的链接中找到可用的选项，或者您可以编辑 bootstrap.bundle.js，如下所示：

改变这个：

var SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file):|[^&:/?#]*(?:[/?#]|$))/gi;

到这里：

var SAFE_URL_PATTERN = /^(?:(?:https?|mailto|skype|ftp|tel|file):|[^&:/?#]*(?:[/?#]|$))/gi;

感谢大家的建议。

Answer 2

您需要启用弹出框的 HTML。

<div class="container">
    <a href="#" data-toggle="popover"><a href="skype:atic.chwdhry?chat">test</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({html:true});   
});
</script>