2012-08-27 87 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

相關問題