2012-08-27 44 views
2

我想有一个弹出的视频播放器。会使用fancybox,但他们没有商业化,我的用例相对简单。基本上我创建了一个覆盖黑色背景中的整个页面的div,具有足够的不透明度,以便仍然可以看到所有内容。我想在页面上的用户的当前位置(高度方向)在这个“叠加” div来放置一个YouTube视频(通过iframe的硬链接插入)。基本上,我不想将此视频放在用户必须滚动到的页面的高度位置。如何检索当前用户浏览器中网页的高度和宽度?

我通过jQuery库望去,包括浏览器和支持,并没有看到说明的东西。有没有我失踪的方法?它可能是一个JavaScript解决方案,我只是碰巧在其他所有的东西上使用JQuery,所以在风格上,你知道。

编辑:

我试图把这个新的div(包含iframe代码中)在用户的浏览器窗口目前的位置,不能确定该文件的高度,或者浏览器的视口的高度。

回答

3

使用$(窗口)。例如:

console.log($(window).height()); 
console.log($(window).width()); 

尝试一下,当您调整浏览器窗口大小时,您会看到它发生变化。

如果你想获取窗口视滚动到的位置,使用$(窗口).scrollTop()和$(窗口).scrollLeft()。使用$(“#myid”)。position()(相对于父对象的偏移量)或$(“#myid”)offset()(相对于文档)如果您想要获取特定元素的位置,请使用$(“#myid”)。 。

+0

嗯,所以实际上,这将如何帮助我确定用户的位置有关系吗?这会给我浏览器视口的高度吗?但是,我需要知道浏览器视口的位置。让我看看DOM,看看我能否找到我需要的窗口属性。谢谢。 – thatidiotguy

+0

我编辑了我的答案。 –

0

我用PrettyPhoto。它不是太大,如果你对JavaScript感到满意,你可以去掉任何不需要的代码,使它更紧凑。

+0

这是如何回答OP关于如何找到正确坐标的问题? –

+0

@尼克感谢您的建议。如果我自己实施它会遇到一些跨域问题,或者它变得太多,我会研究它。 – thatidiotguy

+0

@AresAvatar它回答了问题背后的问题;)另外两个答案充分地回答了直接问题。然而,OP表示他正在“试图让一个弹出式视频播放器”,这可能使他不得不重新发明轮子。 – Nick

1

.height().outerHeight()应该都工作:

http://jsfiddle.net/hL3cv/

$(window).height(); 
$(window).outerHeight(); 
$(window).width(); 
$(window).outerWidth(); 
+0

我想将div放在浏览器的视口已经存在的位置。那有意义吗? – thatidiotguy

+0

也许[这个答案](http://stackoverflow.com/a/3044355/183181)可能会帮助 – vol7ron

相关问题