#javascript #jquery #google-chrome #cross-browser #popup
#javascript #jquery #google-chrome #кроссбраузерный #всплывающее
Вопрос:
При создании всплывающего окна с главной страницы с помощью window.open дочерняя / всплывающая страница использует событие onload, которое должно отображать ее ширину / высоту. Однако в Chrome это всегда приведет к 0. Проверка ширины / высоты как окна, так и документа (с помощью jQuery или без него) вернет только 0. Как ни странно, загрузка дочерней страницы на вкладке сама по себе всегда будет корректно указывать ширину / высоту.
Правильное ли это поведение? Что-то не так с событием загрузки? С Chrome? Есть ли другое событие, которого я могу дождаться, чтобы убедиться, что свойства ширины / высоты, в частности, установлены?
Если при загрузке установлен тайм-аут, вы, скорее всего, получите правильные значения. Но, похоже, это просто игра в угадайку о том, как долго ждать, прежде чем проверять ширину / высоту. Нет ли способа дождаться определенного события, чтобы точно знать, что ширина / высота дочернего окна установлены в Chrome?
Краткая демонстрация ниже с обеими страницами. Надеюсь, что у кого-то, возможно, есть какое-то решение, которое не требует угадывания неопределенного количества времени для ввода в setTimeout.
Редактировать: Забыл упомянуть, я тестировал это на версиях Chrome 14/15.
main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>main</title>
</head>
<body>
<input type="button" value="Pop" onclick="window.open('http://localhost:8085/social_test/test.html', 'namedWnd', 'width=320,height=240')" />
</body>
</html>
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(window).load(function(){
var report = function() {
alert($(window).width() " x " $(window).height());
};
report();
//window.setTimeout(report, 1000);
});
// without any jquery
/*window.onload = function() {
var report = function() {
alert(window.innerWidth " x " window.innerHeight);
// or document's size
//alert(window.document.documentElement.clientWidth
// " x " window.document.documentElement.clientHeight);
};
report();
//window.setTimeout(report, 1000);
};*/
</script>
</head>
<body/>
</html>
Комментарии:
1. что, если добавить некоторый контент в тело?
2. Ваш код работал как есть в основном для меня в Chrome 16 — отображать правильные размеры.
3. Похоже, это действительно работает, пока я проверяю ширину / высоту документа.
4. @Nicholi — на самом деле, я думаю, что сейчас есть проблема. Возможно, ошибка jquery, хотя я не уверен.
5. @david Это работает только при первом открытии всплывающего окна? Затем останавливается? Я думаю, что roberkules попал в точку. Если я помещу что-то в тело документа и проверю $(document). width() / height () вроде бы в порядке. По крайней мере, в Chrome 14/15.
Ответ №1:
почему бы вам не использовать $ (document) вместо $ (window) : http://api.jquery.com/height /
Я использовал это в всплывающем приложении для себя, и оно работает без таймаута или чего-либо еще
Комментарии:
1. Только что попробовал еще раз с помощью $ (document), и, похоже, оно неопределенно возвращает правильные значения. Если я продолжу открывать всплывающее окно (после его закрытия), оно перестанет сообщать правильные значения. Также просто интересно, какую версию Chrome вы используете?
2. Просто понял, что, поскольку мое тело документа действительно пустое, очевидно, что оно сообщит только 0. Добавляя что-то в <body>, и я, кажется, всегда получаю воспроизводимые ответы. Спасибо.
3. @Nicholi — почему $ (window), очевидно, должен возвращать 0? Из документов jQuery: «$ (window). height(); // возвращает высоту окна просмотра браузера » Размер окна просмотра браузера не должен зависеть от того, что находится внутри него.
4. да, то, что говорит Дэвид, верно, но я заметил, что существуют разные правила, когда дело доходит до всплывающих окон, что действительно раздражает
5. @david Я имел в виду проверку $ (document). ширина / высота. Не $ (window). И мое тело документа в примерах пустое, добавьте к нему что-нибудь, а затем $(document). ширина / высота возвращают реальные значения. Почему $ (window) вообще не работает (без тайм-аута), я понятия не имею.
Ответ №2:
Не всегда может быть правильным использовать $(document) вместо $(window)
Решение: Всем, у кого есть (такие) проблемы с jQuery, следует напрямую указать на перепроверку, действительно ли DTD указывает на следующий DTDhttp://www.w3.org/TR/html4/loose.dtd
Комментарии:
1. Придется еще раз проверить, в каком состоянии находится эта проблема сейчас. Хотя, как указывало довольно много разных людей, моя проблема была решена (по большей части) простым добавлением чего-либо в тело документа.
Ответ №3:
Попробуйте:
$(document).load(function(){
function report() {
alert($(window).width() " x " $(window).height());
};
report();
});
Комментарии:
1. Я действительно пробовал это изначально, событие, похоже, вообще не срабатывает. Может ли документ иметь событие загрузки?
2. Что это такое $(document). готово или $(document). загрузка? Я подумал, что ожидание полной загрузки окна было бы разумнее, чем любое из событий ready (будь то окно или документ). Поскольку проблема, похоже, ожидала, пока Chrome завершит то, что он делал (установленные таймауты). $(документ). готово с помощью $ (window). функции ширины / высоты в любом случае не работают.