iPhone全屏中的Magnific Popup答案

【问题标题】：Magnific Popup in iPhone fullscreeniPhone全屏中的Magnific Popup
【发布时间】：2014-04-10 09:26:20
【问题描述】：

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

该网站还支持 apple-mobile-web-app-capable 在 iPad 和 iPhone 上全屏查看。

我正在使用保持独立脚本 (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，它不受此影响，它似乎只是通过单击链接调用的弹出窗口......

提前感谢您的帮助！

【问题讨论】：

标签： ios iphone popup magnific-popup

【解决方案1】：

我通过将针对我的弹出链接数据属性的条件添加到保持独立脚本来解决此问题。我的最终版本：

(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");

【讨论】：