在检测到移动设备时,不加载嵌入iframe的视频

时间:2013-08-17 08:49:59

标签: jquery html mobile iframe loading

在我的网页中有一个iframe,它嵌入了一个带有jquery脚本的视频(vimeo),可以全屏显示视频。

问题在于,在具有全视频视频的移动设备(特别是苹果设备)中,无法推动明显超过视频播放器的链接。

我的解决方案是使用jquery脚本隐藏视频

$('#vimeo').css('display', 'none');
$('#image_video').css('display', 'block');

并显示图片而不是直接链接到vimeo页面的视频。

通过这种方式,我认为如果视频被隐藏,它仍然会在后台加载,而对于移动互联网连接,这是一种浪费。

我的问题是,有没有办法阻止加载iframe?

我希望自己解释一下。对不起,我很抱歉。

2 个答案:

答案 0 :(得分:0)

不要设置iframe src,而是使用自定义数据属性,如

<iframe id="iframe1" data-src="http://...." />

然后使用jQuery设置iframe src,如果你想加载它的内容

  $('#iframe1').attr( 'src',  $('#iframe1').data('src')  );

或隐藏

$('#iframe1').hide()

答案 1 :(得分:0)

当我在托管服务提供商的客户控制面板中开发聊天前端时,我遇到了类似的问题。

由于聊天本身是专有的,并且使用了AJAX,我必须通过iframe访问其DOM,除非您在移动设备上。

我会删除这样的元素:

jQuery("#vimeo").remove();
jQuery("#image_video").css('display','block');

这样就可以避免非标准属性,实际上只是从DOM中删除标记。