通过javascript向iOS和Android用户显示不同的图像

Question

我正在尝试编写代码，向Android和iOS用户显示不同的图像(带有超链接(。例如，图像(android.png(将显示给Android用户，而ios.png将仅向iOS用户显示。我正在使用用户代理来区分。到目前为止，我在这里做了什么，但还无法实现这一目标。

<script type="text/template" id="ios">

<p align="center"><a href="http://www.apple.com>
<img src="ios.png" width="312" height="227"></a></p>
</script>
<script type="text/template" id="android">
<p align="center"><a href="http://www.google.com">
<img src="android.png" width="312" height="227"></a></p>
</script>

<script>

if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
var ios= document.getElementById('ios').innerHTML;
}
if( /Android/i.test(navigator.userAgent) ) {
var android = document.getElementById('android').innerHTML;
}

</script>

Answer 1

http://www.apple.com 后缺少引号：

<script type="text/template" id="ios">
<p align="center"><a href="http://www.apple.com">
<img src="ios.png" width="312" height="227"></a></p>
</script>

试试这个(就是这样？

<script type="text/template" id="ios">
<p align="center"><a href="http://www.apple.com">
<img src="ios.png" width="312" height="227"></a></p>
</script>
<script type="text/template" id="android">
<p align="center"><a href="http://www.google.com">
<img src="android.png" width="312" height="227"></a></p>
</script>
<div id="result"></div>
<script>
var result;
if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
    result = document.getElementById('ios').innerHTML;
}
if( /Android/i.test(navigator.userAgent) ) {
    result = document.getElementById('android').innerHTML;
}
document.getElementById('result').innerHTML = result;    
</script>