Кто-нибудь знает, как рассчитать размеры ДОКУМЕНТА, а не ПЕРСПЕКТИВЫ в Javascript? - PullRequest
Новая
       14

Кто-нибудь знает, как рассчитать размеры ДОКУМЕНТА, а не ПЕРСПЕКТИВЫ в Javascript?

0 голосов
/ 29 июля 2010

Просто чтобы убедиться, что все понимают, о чем я прошу, я пробежусь к тому, что я считаю основными различиями между документом, окном и окном просмотра ....

ОКНО - это все окно браузера, включая все навигационные панели и т.д ....

ПРОСМОТР - это часть окна, используемая для просмотра текущего документа XHTML / HTML / Flash ...

DOCUMENT - это фактическая область содержимого, похожая на тело, но включающая ВСЕ содержимое страницы. Только одна его часть видна в любой момент в VIEWPORT (если страница не имеет такого же размера или меньше, чем область просмотра).

Теперь есть много отличных ответов о том, как получить измерения VIEWPORT. Я уже хорошо разбираюсь в этом ... кросс-браузер и все.

Что мне действительно нужно знать, так это простое кросс-браузерное решение, которое даст мне размеры фактического ДОКУМЕНТА во всех браузерах (без версий старше 3 лет).

Я думал, что однажды нашел здесь отличное решение ... давным-давно ... но сейчас не могу его найти.

Кто-нибудь? Спасибо за прочтение и, надеюсь, кто-то может помочь.

P.S. Я упоминал, что не хочу решений для расчета VIEWPORT? ИЛИ ОКНО?

ОБНОВЛЕНИЕ: это решение ДОЛЖНО работать в Opera 10.x, FireFox 3.6.x, IE 7/8 / x, Flock 2.x, Safari 4.x ... Ни один из приведенных ниже ответов не работает во всех браузерах. ..

Итак, если вы еще не проверили его, пожалуйста, не отвечайте на вопрос.

Ответы [ 5 ]

3 голосов
/ 29 июля 2010

document.body.scrollHeight и document.body.scrollWidth.

Должен дать тебе.

3 голосов
/ 29 июля 2010

Я украл это из источника jQuery и сделал обертку вокруг него:

РЕДАКТИРОВАТЬ: реорганизовал функцию, чтобы она возвращала ширину и высоту в массиве. 

function getDocumentDimensions() {
    var d = document;
    return [
        Math.max(
            d.documentElement['clientHeight'],
            d.body['scrollHeight'],
            d.body['offsetHeight']
        ),
        Math.max(
            d.documentElement['clientWidth'],
            d.body['scrollWidth'],
            d.body['offsetWidth']
        )
     ]
};

getDocumentDimensions() // [1284, 1265]

jQuery дляэто будет $(document).height() и ширина.

1 голос
/ 29 июля 2010

Я думаю, что если вы поместите все содержимое в элемент DIV с нулевыми границами, отступами и полями, то, когда браузер закончит рендеринг, вы можете использовать метод jQuery .height () для опроса DIV для переносадля его фактической высоты.

Я делал это раньше и обнаружил, что у меня были определенные проблемы с различными браузерами.Вы можете не столкнуться с теми проблемами, которые у меня были, но я остановился на этом решении.

0 голосов
/ 11 августа 2010

У нас аналогичная потребность и мы используем этот код.Он не тестировался в Opera / Flock, но мы охватываем все остальные браузеры.Обратите внимание, что это не всегда идеально, но делает работу в 99% + случаев. 

function getContentWidthHeight() {
    var pageWidth = 0; 
    var pageHeight = 0;

    if (window.innerHeight && window.scrollMaxY) {
        pageWidth = window.innerWidth + window.scrollMaxX;
        pageHeight = window.innerHeight + window.scrollMaxY;
    } 
    if (document.body.scrollHeight) {
        pageWidth = Math.max(pageWidth, document.body.scrollWidth);
        pageHeight = Math.max(pageHeight, document.body.scrollHeight);
    }
    if (document.body.offsetHeight) {
        pageWidth = Math.max(pageWidth, document.body.offsetWidth);
        pageHeight = Math.max(pageHeight, document.body.offsetHeight);
    }
    if (document.documentElement.offsetHeight) {
        pageWidth = Math.max(pageWidth, document.documentElement.offsetWidth);
        pageHeight = Math.max(pageHeight, document.documentElement.offsetHeight);
    }
    if (document.documentElement.scrollHeight) {
        pageWidth = Math.max(pageWidth, document.documentElement.scrollWidth);
        pageHeight = Math.max(pageHeight, document.documentElement.scrollHeight);
    }
    return [ pageWidth, pageHeight ];
};
0 голосов
/ 02 августа 2010

Извините, но ни один из этих ответов не был тем, что я искал. В конце я решил просто придерживаться document.body.getWidth () и document.body.getHeight () в Prototype.

...