javascript - ajax/javascript 照片库无法在 iPhone Safari 上运行

Question

我正在开发我的第一个网站，并建立了一个交互式照片库。背后的主要思想是显示一个大图像，如果用户单击它，它会更改为下一张图像。下面还有一个缩略图轮播，也可用于更改为主图像。我几乎按照我想要的方式工作了(减去风格等方面的一些小问题)。然后我尝试在 iPhone 上使用该网站，发现照片库无法像在桌面上那样工作。似乎发生的情况是，当我单击图像时，它会重新加载具有相同图像的页面，而不是列表中的下一个图像。

我决定编码的方式是，图像包含在 anchor 标记中，例如:

<a class="nextphoto" href="" onclick="return false;">

单击时，jQuery 捕获该事件并将适当的参数传递给 JavaScript 函数，该函数用新照片更新文档。该函数调用 changePhoto() 并创建一个 XMLHttpRequest 来获取存储所有图像名称和 alt 信息的 XML 文件。

要查看当前状态的照片库，请转至 http://www.mwlets.co.uk/properties.html

我最初认为这是 iPhone 不支持 javascript、jQuery 或 xml 的问题，但我似乎能够找到所有这些东西的工作示例。我什至尝试了从 xml 文件中提取信息的 w3schools 示例，效果很好。

我的 JavaScript 代码是:

    $(document).ready(function(){
      $("a.nextphoto").bind("click",function()
        {
          var imgID = document.getElementById("mainphoto").name;
          imgID++;
          changePhoto(imgID,false);
        });
});

$(document).ready(function(){
      $("a.prevphoto").bind("click",function()
        {
          var imgID = document.getElementById("mainphoto").name;
          imgID--;
          changePhoto(imgID,false);
        });
});

$(document).ready(function(){
      $("a.thumbnail").bind("click",function()
        {
          var currentID = document.getElementById("mainphoto").name;
          var thumbID = $(this).attr("name");
          if(currentID != thumbID)
            {
              changePhoto(thumbID,false);
            }
        });
});

function changePhoto(newimgID,slideshow)
    {
      var imgsrc = "http://www.mwlets.co.uk/Images/Mayfield/Large/to_let_mayfield_ashbourne_derbyshire_"
    var xmlhttp, images, imageName, imageAlt, imgalt;

 if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
  }
 else
  {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

 xmlhttp.onreadystatechange=function()
  {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      images = xmlhttp.responseXML.documentElement.getElementsByTagName("IMAGE");

        if(newimgID > images.length)     
          {
              newimgID = 1;
          }
        if(newimgID < 1)
          {
            newimgID = images.length;
          }

      document.getElementById("mainphoto").name=newimgID;
      document.getElementById("photoindex").innerHTML=newimgID;

      imageName=images[newimgID - 1].getElementsByTagName("NAME");
      imgsrc += imageName[0].firstChild.nodeValue;
      document.getElementById("mainphoto").src=imgsrc;

      imageAlt=images[newimgID - 1].getElementsByTagName("ALT");
      imgalt = imageAlt[0].firstChild.nodeValue;
      document.getElementById("mainphoto").alt=imgalt;
      document.getElementById("captiontext").innerHTML=imgalt;   
    }
  }

 xmlhttp.open("GET","http://mwlets.co.uk/Images/Mayfield/image_list.xml",true);
 xmlhttp.send();

}

我个人认为理论上所有组件都应该可以在 iPhone 上运行。如果有人能提出不这样做的潜在原因，那就太好了。

我还意识到这可能不是最好的编码方式。这是我第一次尝试在适当的应用程序中使用 Javascript、jQuery 和 Ajax。我愿意接受有关替代方法的建议。我的主要要求是它能完成目前在网站上所做的事情(从桌面上查看)，它是跨浏览器/平台的，并且可以快速检索图像。我计划优雅地降级此代码，以便没有 JS 的浏览器可以将图像视为一种框架样式画廊。

提前致谢，

马特

Answer 1

Safari 正在刷新页面，因为 href 为空(我相信这是标准的 Safari 行为)。尝试通过 jQuery 设置点击事件(那么你可能不必使用 anchor 标记)。即 $("#picturelementid").click(function{});