Question

我在网站上使用奇妙的Magnific Popup脚本来显示图片库。

此网站也是苹果移动网络应用程序，可在iPad和iPhone上全屏查看。

我正在使用Stay Standalone脚本（https://gist.github.com/irae/1042167）来防止在页面之间导航时被转储回Mobile Safari：

(function(document,navigator,standalone) {
    // prevents links from apps from oppening in mobile safari
    // this javascript must be the first script in your <head>
    if ((standalone in navigator) && navigator[standalone]) {
        var curnode, location=document.location, stop=/^(a|html)$/i;
        document.addEventListener('click', function(e) {
            curnode=e.target;
            while (!(stop).test(curnode.nodeName)) {
                curnode=curnode.parentNode;
            }
            // Condidions to do this only on links to your own app
            // if you want all links, use if('href' in curnode) instead.
            if(
                'href' in curnode && // is a link
                (chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor
                (   !(/^[a-z\+\.\-]+:/i).test(chref) ||                       // either does not have a proper scheme (relative links)
                    chref.indexOf(location.protocol+'//'+location.host)===0 ) // or is in the same protocol and domain
            ) {
                e.preventDefault();
                location.href = curnode.href;
            }
        },false);
    }
})(document,window.navigator,'standalone');

此脚本阻止在iOS上以全屏模式触发Magnific Popup。我的Magnific Popup初始化脚本如下：

jQuery(document).ready(function($) {
  $('.lightview').magnificPopup({
    type: 'image',
    removalDelay: 500,
    gallery:{
      enabled:true,
    },
    image: {
      verticalFit: true,
      titleSrc: function(item) {
        return '<strong>' + item.el.attr('title') + '</strong>' + ' <br /><span class="lightbox-caption">' + item.el.attr('data-caption') + '</span>';
      },
      markup: '<div class="mfp-figure">'+
                  '<div class="mfp-close"></div>'+
                  '<div class="mfp-img"></div>'+
                  '<div class="mfp-title-holder">'+
                    '<div class="mfp-title"></div>'+
                  '</div>'+
                  '<div class="mfp-bottom-bar">'+
                    '<div class="mfp-counter"></div>'+
                  '</div>'+
                '</div>'
    },
    callbacks: {
      beforeOpen: function() {
         this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
         this.st.mainClass = this.st.el.attr('data-effect');
      }
    },
    cursor: 'mfp-zoom-out-cur',
    closeOnContentClick: false,
    midClick: true
    });
});

如何阻止Stay Standalone干扰Magnific Popup？

我在我的网站上的其他地方有一个自动打开Magnific Popup，不受此影响，它似乎只是通过点击链接调用弹出窗口...

提前感谢您的帮助！

Answer 1

我通过添加将弹出链接数据属性定位到Stay Standalone脚本的条件来修复此问题。我的最终版本：

(function (a, b, c) {
if (c in b && b[c]) {
    var d, e = a.location,
        f = /^(a|html)$/i;
    a.addEventListener("click", function (a) {
        d = a.target;
        while (!f.test(d.nodeName)) {
            d = d.parentNode
        }
        if ("href" in d && (chref = d.href).replace(e.href, "").indexOf("#") 

            && !d.attributes.getNamedItem("data-effect") // <- FIX IS HERE!

            && (!/^[a-z\+\.\-]+:/i.test(chref) || chref.indexOf(e.protocol + "//" + e.host) === 0)) {
            a.preventDefault();
            e.href = d.href
        }
    }, false)
}
})(document, window.navigator, "standalone");

iPhone全屏显示Magnific Popup

1 个答案: