javascript - PhotoSwipe 在新窗口中打开照片

Question

我正在尝试使用 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 上尝试时，它不起作用。当我按下按钮时，什么也没有发生。

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

谢谢!

Answer 1

iPad 可能会阻止此脚本作为“弹出窗口”。请参阅this所以问题。要确定问题是弹出窗口阻止程序，请转到“设置”>“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 返回字符串中。