javascript - 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>

所以就有了“意想不到的结果”的原因。

至于解决方案:在我的例子中，我只是为我的文本切换到一个不同的容器(我使用了一个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)。但这将禁用您页面上的所有电话号码链接...