Как реализовать телефонные ссылки с помощью Javascript

Я работаю с темой WordPress, и это функциональность, которую я пытаюсь достичь:

<a href="tel:225-1077">225-1077</a>

Конечно, это легко сделать с помощью HTML, но я действительно плохо разбираюсь в WordPress, и в этой теме, которую я получил, так много файлов, что трудно найти, где я должен редактировать, тем не менее, тема позволяет вам добавлять собственный JS, поэтому мне было интересно, если описанную выше функциональность можно реализовать с помощью JS.

Любая помощь очень ценится!


javascript tel
person CheeseCake    schedule 07.11.2014    source источник
comment
Это возможно, но, вероятно, лучше найти правильный файл и сделать это в HTML, поддержка JS на мобильных телефонах не полностью совместима.   -  person msturdy    schedule 07.11.2014
comment
@msturdy Так верно. Я пытаюсь, хотя. Номер будет по всей странице, он будет действовать как кнопка CTA, но вместо того, чтобы куда-то попасть, он звонит по указанному номеру телефона.   -  person CheeseCake    schedule 07.11.2014

Ответы (1)


arrow_upward
0
arrow_downward

Очень просто, это возможно, но это не значит, что это хорошая идея. Поддержка JS на мобильных телефонах непостоянна и даже не всегда включена, что означает, что эти люди никогда не увидят вашу ссылку.

Создать ссылку с помощью JS просто:

var cta = document.createElement('a');

cta.href = 'tel:12341234';
cta.setAttribute('class', 'my cta classes');
cta.appendChild(document.createTextNode('1234-1234'));

а затем вам нужно поместить его где-нибудь на странице. Если у нас есть <div> повсюду с определенным классом, мы можем использовать это:

Это наш HTML

<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div>

и наш JS для вставки ссылок должен перебирать эти элементы, создавая ссылки и вставляя их по ходу дела:

var targets = document.getElementsByClassName('target-cta'),
    target, 
    i, 
    cta; // Call To Action

for (i = 0; i < targets.length; i++) {

    target = targets[i];
    cta = document.createElement('a');

    cta.href = 'tel:12341234';
    cta.setAttribute('class', 'my cta classes');
    cta.appendChild(document.createTextNode('1234-1234'));

    target.appendChild(cta);
};


    var targets = document.getElementsByClassName('target-cta'),
        target, i, cta;

    for (i = 0; i < targets.length; i++) {

        target = targets[i];
        cta = document.createElement('a');

        cta.href = 'tel:12341234';
        cta.setAttribute('class', 'my cta classes');
        cta.appendChild(document.createTextNode('1234-1234'));

        target.appendChild(cta);
    };
<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div>

person msturdy    schedule 07.11.2014
comment
Спасибо! Это действительно полезно. :) - person CheeseCake; 07.11.2014
comment
@CheeseCake рад, что это помогает! ;) - person msturdy; 07.11.2014