[英]How do I add a dynamic phone number to the HTML5 phone number link href attribute?
For the telephone numbers on my site, I have the following HTML:对于我网站上的电话号码,我有以下 HTML:
<span class="rTapNumber"></span>
The class here activates a script and a random number is inserted inside the span (for tracking purposes.这里的类激活一个脚本,并在跨度内插入一个随机数(用于跟踪目的。
I want to use telephone links for mobile ie <a href="tel:01234567890">
but the number can't be hard-coded... how can I get the dynamic number that's used in the <span>
to go into this href
attribute?我想使用移动电话链接,即
<a href="tel:01234567890">
但号码不能硬编码......我怎样才能获得<span>
使用的动态号码进入这个href
属性?
The resulting code should be like this:生成的代码应该是这样的:
<span class="rTapNumber"><a href="tel:+441234567890">01234567890</a></span>
Hope you can help.希望你能帮忙。
I used the following (the rTapPostReplacement function is the function which gets called by responsetap after it's replaced all the numbers).我使用了以下内容(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);
});
}
UPDATE 6 April, 2016 2016 年 4 月 6 日更新
I've since found out that this callback will only get called once (the first time ResponseTap replacements occur).我后来发现这个回调只会被调用一次(第一次发生 ResponseTap 替换)。 This is because the default implementation of ResponseTap only replaces numbers which are visible on-screen.
这是因为 ResponseTap 的默认实现仅替换屏幕上可见的数字。 Any subsequent number replacements don't trigger the callback for whatever reason.
无论出于何种原因,任何后续的数字替换都不会触发回调。
So the only way to make sure this works reliably, is to modify the ResponseTap tracking code so that:因此,确保它可靠工作的唯一方法是修改 ResponseTap 跟踪代码,以便:
adiRVO = false; // This is set to true by default
This replaces all numbers in the document at the same time, regardless of visibility.无论可见性如何,这都会同时替换文档中的所有数字。
So the full implementation looks like this所以完整的实现看起来像这样
// 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);
});
}
For some reason this question seems to still be hot despite being 6 years old, so here's my solution using the MutationObserver API出于某种原因,尽管这个问题已经 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>
The general method is as follows一般方法如下
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.