innerHTML无法在iPhone上工作

Question

我刚在一个神秘的问题上花了几个小时太多。我没有找到任何东西通过谷歌。我想分享这个发现。

这里的代码在PC上会产生预期的结果，但意外的在iPhone上：

var input = document.getElementById('input'); 
 
var output = document.getElementById('output'); 
 
output.innerHTML = parseInt(input.innerHTML);

<div id="input">1233453455</div> 
 
<div id="output"></div>

预期成果：

1233453455 
1233453455 

iPhone结局：

1233453455 
NaN 

为什么？

Answer 1

iPhone在执行javascript代码之前更改了innerHTML内容！ “长号码”被解释为电话号码（在这种情况下它不是这样），并在innerHTML内部添加一个tel链接。观察什么alert窗户透着（以下执行脚本在iPhone上）：

var input = document.getElementById('input'); 
 
var output = document.getElementById('output'); 
 
alert('input content: ' + input.innerHTML) 
 
output.innerHTML = parseInt(input.innerHTML);

<div id="input">1233453455</div> 
 
<div id="output"></div>

所以没有为“意外结果”的原因。

作为一个解决方案：在我的情况下，我简单地切换到一个不同的容器，用于我的文本（I使用的data-属性）：

var input = document.getElementById('input'); 
 
var output = document.getElementById('output'); 
 
output.innerHTML = parseInt(input.getAttribute('data-test'));

<div id="input" data-test="1233453455">1233453455</div> 
 
<div id="output"></div>

另一个似乎被描述here （感谢@epascarello for pointing this out）。但是，这将禁用您的网页上的所有电话号码链接...