jquery - 在 wordpress 中隐藏 Safari 浏览器的 div 并在页面加载时显示另一个 div

Question

我有 2 个画廊，一个是来自 microsoft 的 deepzoom 组合，另一个是从数据库调用画廊的 wordpress 短代码。每个画廊都在自己的 div 中。我只需要在 safari 中显示 safari 图库并隐藏其他 div。然后在其他浏览器上我需要隐藏 safari div 并显示 deepzoom 画廊。

我使用的代码如下：

查询：`

<script>
    var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera",
            versionSearch: "Version"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();
switch(BrowserDetect.browser) {
if( $.browser.safari ) {
          $(".safari_galery").show();
          $(".default_galery").hide();}
          break;
     default:
          $(".safari_galery").hide();
          $(".default_galery").show();
}
</script>



<div class="safari_galery">[slideshow id=3]</div>
<div class="default_galery">[iframe src="http://link to the iframe" id="deepzoom" name="deepzoom" width="100%" height="700px" scrolling="no"]</div>

这在 wordpress 中不起作用，我很绝望，因为我一直很难弄清楚这一点。

Answer 1

尝试这个。

if ( BrowserDetect.browser == 'Safari' ) {
      $(".safari_galery").show();
      $(".default_galery").hide();
} else {
      $(".safari_galery").hide();
      $(".default_galery").show();
}