Чистая функция JavaScript похожа на jQuery.offset ()? - PullRequest
Новая
       40

Чистая функция JavaScript похожа на jQuery.offset ()?

4 голосов
/ 26 мая 2011

У меня есть небольшое iframe-приложение в российской социальной сети Odnoklassniki.ru и для изменения его размера iframe я использую следующий вызов: 

<div id="fb-root"></div> 
<script src="http://api.odnoklassniki.ru//js/fapi.js" 
type="text/javascript"></script> 
<script type="text/javascript"> 
FAPI.init("http://api.odnoklassniki.ru/", "XXX_YYY",
function() {
        alert("XXX " + document.getElementById("fb-root").clientHeight);
        alert("XXX " + document.getElementById("fb-root").offsetHeight);
        FAPI.UI.setWindowSize(720, 1200);
}, function(error){
        alert("API initialization failed");
});
</script> 
</body> 
</html>

т.е. высота iframe в настоящее время жестко задана как 1200 .

Работает нормально, но я бы хотел вместо этого использовать высоту / позицию элемента # fb-root .

У кого-нибудь есть идея, какую функцию JavaScript или CSS можно использовать здесь - если я не хочу включать jQuery только для одного $ (# fb-root) .offset () звоните?

Я также посмотрел на их библиотеку http://api.odnoklassniki.ru//js/fapi.js, но она не включает такую ​​функцию.

UPDATE

Я добавил два оповещения в исходный код выше, но они выводят только «XXX 0».

UPDATE

Следующий код, похоже, хорошо работает для моего приложения iframe в Google Chrome и Mozilla Firefox, независимо от того, сколько
я добавлю для его тестирования. Но в Internet Explorer не удается изменить размер окна, и в Google Chrome появляется предупреждение top = 1107 вместо top = 1157, поэтому HTML-таблица внизу обрезается:

preferans

... here my flash game + html table with players ...
<br>
<br>
<br>
<br>
<br>
<br>
<div id="fb-root"></div>
<script src="http://api.odnoklassniki.ru/js/fapi.js" type="text/javascript"></script>
<script type="text/javascript">
FAPI.init("http://api.odnoklassniki.ru/", "XXX_YYY",
function() {
        var top = findTop(document.getElementById("fb-root"));
        FAPI.UI.setWindowSize(720, Math.max(top, 1200));
}, function(error){
        alert("API initialization failed");
});
function findTop(obj) {
        if(!obj) return 0;
        return obj.offsetTop + findTop(obj.offsetParent);
}
</script>

</body>
</html>

Спасибо! Alex

Ответы [ 3 ]

6 голосов
/ 26 мая 2011

Quirksmode имеет учебник / функцию JavaScript, который показывает, как найти координаты элемента здесь

Когда у вас есть его координаты, вы можете использовать свойство offsetHeight iframe для чтенияего высота.

1 голос
/ 02 июня 2011

Если document.getElementById("fb-root").clientHeight возвращает 0, это, безусловно, означает, что ваш div "fb-root" либо не отображается, либо все еще пуст.

Я посмотрел на fapi.js, и кажется, что вызовфункция FAPI.init создает промежуток с идентификатором «FAPI_Flash_wrap», добавляет его в тело документа, а затем вставляет в этот промежуток флэш-объект с идентификатором «FAPI_Flash».

Поэтому я бы попытался получитьэлемент с идентификатором "FAPI_Flash_wrap" или "FAPI_Flash" вместо "fb-root": 

<script type="text/javascript">
FAPI.init("http://api.odnoklassniki.ru/", "XXX_YYY",
function() {
    alert("Height = " + document.getElementById("FAPI_Flash_wrap").offsetHeight);
    alert("Width = " + document.getElementById("FAPI_Flash_wrap").offsetWidth);
    FAPI.UI.setWindowSize(720, 1200);
}, function(error){alert("API initialization failed");}
);
</script>
Я надеюсь, что это работает!

Если это так, тогда просто используйте 

<script type="text/javascript">
FAPI.init("http://api.odnoklassniki.ru/", "XXX_YYY",
function() {
    var height = document.getElementById("FAPI_Flash_wrap").offsetHeight;
    var width = document.getElementById("FAPI_Flash_wrap").offsetWidth;
    FAPI.UI.setWindowSize(width, height);
}, function(error){alert("API initialization failed");}
);
</script>
0 голосов
/ 01 июня 2011

Используйте offsetHeight или clientHeight , чтобы получить высоту div: 

document.getElementById("fb-root").offsetHeight // including border
document.getElementById("fb-root").clientHeight // excluding border

Используйте offsetLeft и offsetTop дляполучить положение div относительно его offsetParent . offsetParent - это его первый родительский блок, стиль позиции которого является фиксированным, относительным или абсолютным.

...