我正在尝试使用 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 上尝试时,它不起作用。当我按下按钮时,什么也没有发生。
谁能帮我解决这个问题吗?也许我做错了,所以请告诉我不同的方法是否会更好。
谢谢!
最佳答案
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
返回字符串中。
关于javascript - PhotoSwipe 在新窗口中打开照片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11678301/