Question

对于我网站上的电话号码，我有以下HTML：

<span class="rTapNumber"></span>

此处的类激活脚本，并在范围内插入随机数（用于跟踪目的。

我想使用手机的电话链接，<a href="tel:01234567890">，但号码不能硬编码...我怎样才能获得<span>中使用的动态号码href属性？

结果代码应如下所示：

<span class="rTapNumber"><a href="tel:+441234567890">01234567890</a></span>

希望你能提供帮助。

Answer 1

我使用了以下内容（rTapPostReplacement函数是在替换所有数字后由responsetap调用的函数）。

function rTapPostReplacement() {

    // loop through all links which are using the HTML5 href="tel:000000" property
    $('a[href*="tel:"]').each(function(){

        // get the replaced text/number
        var number = $(this).text();

        // replace all spaces with nothing (in case the tel: property doesn't like spaces)
        number = number.replace(/\s+/g, '').toLowerCase();

        // update the href attribute to the replaced number
        $(this).attr('href', 'tel:' + number);
    });
}

2016年4月6日更新

我发现这个回调只会被调用一次（第一次发生ResponseTap替换）。这是因为ResponseTap的默认实现仅替换屏幕上可见的数字。任何后续的数字替换都不会因任何原因触发回调。

因此，确保其可靠运行的唯一方法是修改ResponseTap跟踪代码，以便：

adiRVO = false; // This is set to true by default

无论可见性如何，都会同时替换文档中的所有数字。

所以完整的实现看起来像这样

// The ResponseTap tracking code
var adiInit = "00000", adiRVO = false; // Set to false
var adiFunc = null;
(function() {
    var adiSrc = document.createElement("script"); adiSrc.type = "text/javascript";
    adiSrc.async = true;
    adiSrc.src = ("https:" == document.location.protocol ? "https://static-ssl" : "http://static-cdn")
        + ".responsetap.com/static/scripts/rTapTrack.min.js";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(adiSrc, s);
})();


// The ResponseTap callback
function rTapPostReplacement() {

    // loop through all links which are using the HTML5 href="tel:000000" property
    $('a[href*="tel:"]').each(function(){

        // get the replaced text/number
        var number = $(this).text();

        // replace all spaces with nothing (in case the tel: property doesn't like spaces)
        number = number.replace(/\s+/g, '').toLowerCase();

        // update the href attribute to the replaced number
        $(this).attr('href', 'tel:' + number);
    });
}

Answer 2

由于某种原因，尽管这个问题已经6岁了，但这个问题似乎仍然很热门，因此这是我使用MutationObserver API

的解决方案

            <script type="text/javascript">
                document.addEventListener('DOMContentLoaded', () => {
                    let observer = new MutationObserver(callback);

                    let observerOptions = {
                        childList: true,
                        attributes: false,
                        characterData: false,
                        subtree: false,
                    };

                    let node = document.getElementById('rTapNumber');
                    
                    function callback(mutations) {
                        mutations.forEach(el => {
                            if(el.type === 'childList') {
                                document.querySelector('.responseTapLink').href = 'tel:' + el.target.innerText;
                                observer.disconnect();
                            }
                        });
                    }

                    observer.observe(node, observerOptions);
                });
            </script>
            <a class="responseTapLink" href=""><span id="rTapNumber" class="rTapNumber00000">00000 000 000</span></a>

一般方法如下

在ResponseTap容器周围添加具有唯一类/ ID的标签

为responsetap容器赋予唯一的ID，以便我们轻松获得Node

设置“突变观察者”以观察responsetap容器中childList的更改

发生突变（插入新电话号码）时，将标记的href设置为responseTap容器的innerText

断开观察者的连接

如何在HTML5电话号码链接href属性中添加动态电话号码？

2 个答案: