PhotoSwipe 在新窗口中打开照片答案

【问题标题】：PhotoSwipe open photo in new windowPhotoSwipe 在新窗口中打开照片
【发布时间】：2012-09-29 04:33:11
【问题描述】：

我正在尝试使用 javascript 在新窗口中打开当前可见的照片，但它也必须在 iPad 上工作。我尝试的是在工具栏上添加一个按钮（如示例中所示）。我还在photoswipe.css中添加了那个按钮的css。我添加了一个 javascript 函数：

function getImgUrl()
{
    var divHead = getElementsByClassName(document, 'ps-carousel-content');
    var imgElement = divHead[0].getElementsByTagName("img");
    var imgUrl = imgElement[1].getAttribute('src');
    window.open(imgUrl.toString())
}

我确实使用示例中的代码来获取自定义工具栏，但添加了创建按钮的部分：

getToolbar: function(){
    return '<div class="ps-toolbar-close"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-play"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-previous" style="padding-top: 12px;"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-next"><div class="ps-toolbar-content"></div></div><div onclick="javascript: getImgUrl();" class="ps-toolbar-download"><div class="ps-toolbar-content"></div></div>';
}

这在 chrome 和 safari 等 webkit 浏览器中完美运行（照片在新窗口/标签中打开）。但是当我在 iPad 上尝试时，它不起作用。当我按下按钮时，什么都没有发生。

谁能帮我解决这个问题？也许我做错了，所以告诉我不同的方法是否会更好。

谢谢！

【问题讨论】：

您是否尝试过包装锚标记并将目标设置为_blank？

标签： javascript jquery html ios photoswipe

【解决方案1】：

iPad 可能会将此脚本作为“弹出窗口”来阻止。请参阅this SO 问题。为确保问题是弹出窗口阻止程序，请转到设置> Safari >“阻止弹出窗口”将其关闭并查看它现在是否有效。

如果您确定这是弹出窗口阻止程序而不是其他问题，请尝试将打开图像的方式更改为以下内容：

function getImgUrl()
{
    var divHead = getElementsByClassName(document, 'ps-carousel-content');
    var imgElement = divHead[0].getElementsByTagName("img");
    var imgUrl = imgElement[1].getAttribute('src');
    return imgUrl.toString();
}

getToolbar: function(){
    return '<div class="ps-toolbar-close"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-play"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-previous" style="padding-top: 12px;"><div class="ps-toolbar-content"></div></div><div class="ps-toolbar-next"><div class="ps-toolbar-content"></div></div><a href="' + getImgUrl() + '" target="_blank" class="ps-toolbar-download"><div class="ps-toolbar-content"></div></a>';
}

我更改了您的函数以将图像 url 作为字符串返回，然后将其插入到您的 getToolbar 返回字符串中。

【讨论】：