logo标签列表

如何在不使用<a>标签的情况下通过JavaScript拨打电话号码？

javascripthtml
61

我设计了一个移动网页。其中有一个电话号码字段，点击该字段应该拨打该特定号码。我不能使用：

<a href="tel:+1800229933"></a>

因为我使用表格标签添加了电话号码字段如下：

<table>
  <tr>
    <td>Phone: 900 300 400</td>
  </tr>
</table>

除了OnClick事件之外，有没有其他方法可以在单击该列时调用该电话号码？

8
为什么您不能将a标签添加到表格单元格中？ - PeeHaa
7个回答
118

您可以在 <tr> 标签中添加一个 onclick 处理程序，然后调用 window.open("tel:+1800229933");。

就像这样：

<table>
  <tr onclick="window.open('tel:900300400');">
    <td>Phone: 900 300 400</td>
  </tr>
</table>
17
这应该被标记为正确答案，因为它是按照问题要求不使用<a />锚标签实现的。 - Adeel Imran
2
第一次很奇怪，但是运行良好，另一次导航到空白窗口。不知道原因，有什么想法吗？ - Pardeep Jain
@PardeepJain 最好是开一个新问题，提供一个最简示例。 - idmadj
15
我知道这个问题是很久以前的，但是对于导航到新标签页的问题，只需将其打开在当前标签页中：window.open('tel:123123123', '_self');。如果需要更多选项，请查看此链接：https://www.w3schools.com/jsref/met_win_open.asp - Frank
25

改为：

<table>
  <tr>
    <td>Phone: 900 300 400</td>
  </tr>
</table>

致：

<table>
  <tr>
    <td>
      <a href="tel:+900300400">Phone: 900 300 400</a>
    </td>
  </tr>
</table>
是的，现在它可以工作了。我想之前我错误地添加了<a>标签。感谢您的帮助。 - msg
5
实际上，你解决了这个问题，但这不是“不使用<a>标签”的直接答案。我正在寻找一种更好的解决方案，因为我需要它在ReactJS堆栈中使用。 - AmerllicA
3
这个问题明确询问是否没有使用<a>标签，是吗？ - Salam
18

使用jQuery查找单元格内容，替换“Phone:”部分并将其变为链接。通过选择具有类的单元格来进行操作是一种方法。另一种方法是在实际表格中选择具有类似于“表格每行中的第二个单元格”的代码的单元格。

下面是一个可用的示例：

<html>
  <head>
    <title>Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $(function() {
        $('.phonecell').click(function() {
          var PhoneNumber = $(this).text();
          PhoneNumber = PhoneNumber.replace('Phone:', '');
          window.location.href = 'tel://' + PhoneNumber;
        });
      });
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td class="phonecall">Phone: 900 300 400</td>
      </tr>
    </table>
  </body>
</html>
它更好，因为它使用JS而不是新标签页。 - amir22
8
题目所问的确切答案是，因此，不使用<a>标签，需要制作一个辅助函数来模拟<a href="tel:的操作：

const simulateCall = phoneNumber => window.open(`tel:${phoneNumber}`, '_self');

target _self 这个属性会让我们得到一个和点击 <a href="tel: 一样的模拟呼叫的效果。

现在，simulateCall 辅助函数可以在任何地方使用。例如我的情况：

const callHandler = phoneNumber => () => {
  // I want to do something here then make a call
  simulateCall(phoneNumber);
};

~~~

<SomeComponent onClick={callHandler} ...
"_self" 对于目标是关键。否则它会打开一个新窗口。 - mc.
3

简短回答：

这将使你保持在同一个窗口中。

window.location = "tel:495898694"

这将会打开另一个标签页并拨打该号码

window.open('tel:900300400');
0
0
如果你需要在点击按钮时打开手机的拨号器，你可以尝试以下方法：
            onClickBtn={() => window.open(`tel:+919876543210`)}

例子：
           <ActionButton
            onClickBtn={() => window.open(`tel:+919876543210`)}
            title="Call Owner"
            icon={<LeftCircleTwoTone />}
          />
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接