在Javascript中仅以Safari为目标
在Javascript中仅以Safari为目标
提问于 2015-09-30 01:58:28
我已经在我的squarespace网站上很好地运行了这段代码，它利用一段视频作为背景图像。唯一的问题是，我已经创建了一个自定义导航菜单，并在其他地方添加了一些jquery，当视频被设置为背景横幅图像时，它似乎在Safari中停止工作。
我尝试将Safari添加到用户代理列表中，但这自然也会影响到chrome，并且视频无法播放。
谁能告诉我如何让safari桌面浏览器忽略脚本而不影响Chrome？
<script type="text/javascript">
$(window).bind("load", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
{
} else {
var banner = $('#pageWrapper img').first();
if (banner.length === 0)
banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first();
if (banner.length === 0)
banner = $('#parallax-images img').first();
if (banner.length === 0)
banner = $('.has-main-image img').first();
if (banner.length === 0)
banner = $('.primary-image img').first();
if (banner.length === 0)
banner = $('#page-thumb img').first();
var url = "https://max-fedorov-pzor.squarespace.com/s/Frog-eggs.mp4";
banner.hide();
$('<video class="bannerVideo" autoplay="" loop="" preload><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
adjustBanner($('.bannerVideo'), banner);
setTimeout(function() {
adjustBanner($('.bannerVideo'), banner);
}, 2000);
$(window, banner).resize(function() {
adjustBanner($('.bannerVideo'), banner);
setTimeout(function() {
adjustBanner($('.bannerVideo'), banner);
}, 200);
});
}
function adjustBanner (video, banner) {
video.css({
height: banner.css('height'),
width: banner.css('width'),
top: banner.css('top'),
left: banner.css('left'),
position: 'relative',
'object-fit': 'inherit'
});
}
});
非常感谢。
回答 1
Stack Overflow用户
发布于 2015-09-30 02:18:32
这是一个用来检查safari的技巧。我还没有测试过它，但据推测它可以检测到所有版本的safari。
var isSafari = /constructor/i.test(window.HTMLElement);还有一些选项；有一些是特定于<=v5或v6的。我在http://browserhacks.com/上发现他们在搜索'safari‘
还有一个对象，理想情况下应该只在chrome window.chrome中定义，这样你就可以检查它是否是未定义的，以消除chrome。
另一种选择--在这种情况下可能不相关，但如果您知道需要使用的确切特性，并且不介意使用库：https://modernizr.com/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32850765
复制相关文章
相似问题
腾讯云开发者
