Событие onresize не срабатывает
На сайте http://help.dottoro.com/ljorlllt.php описывается событие onresize и даются примеры его использования. При попытке запуска указанных примеров в ОС ALT Linux 6.0 Centaurus (браузерах Firefox 17.0.11, Opera 12.15, Epiphany 2.30.6, Google Chrome 21.0.1180.89) размещённые в них события срабатывают, кроме onresize: в этом случае совершенно ничего не происходит. Правда, в первом примере в браузерах Epiphany и Google Chrome всплывающее окно всё-таки появляется, но только при загрузке окна, а не при удалении элемента. Чем объяснить отсутствие реакции на это событие - мне пока неизвестно. Буду признателен за любой совет по решению данной проблемы.
|
Причем тут удаление элемента? onresize -- это событие изменения размера окна.
|
Пример 1 (по ссылке), где удаление элемента должно вызвать появление всплывающего окна.
<head>
<script type="text/javascript">
function OnResizeDocument () {
alert ("Размер окна или документа изменился.");
}
function RemoveBlue () {
var blueDiv = document.getElementById ("blueDiv");
if (blueDiv) {
blueDiv.parentNode.removeChild (blueDiv);
}
}
</script>
</head>
<body onresize="OnResizeDocument ()">
Если вы УДАЛИТЕ синий элемент, высота документа уменьшается.
<br />
<button onclick="RemoveBlue ();">УДАЛИТЕ синий элемент</button>
<br /> <br />
Когда размер документа изменяется, событие onresize происходит на элементе body в Internet Explorer.
В Firefox, Opera, Google Chrome и Safari событие onresize происходит на элементе body, когда окно браузера изменяется.
Изменение размера окна браузера тоже вызывает событие onresize в Internet Explorer.
Попробуйте изменить размер окна браузера!
<br /> <br />
<div id="blueDiv" style="height:500px; background-color:blue;"></div>
</body>
|
Выяснилось, что решение описанной проблемы размещено на сайте http://habrahabr.ru/post/166321/
В соответствии с ним преобразованный код будет выглядеть следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Onresize</title>
<script type="text/javascript">
function UpdateCoords(){
var posX=document.getElementById("posX");
var posY=document.getElementById("posY");
posX.innerHTML=document.getElementById("dv").offsetWidth;
posY.innerHTML=document.getElementById("dv").offsetHeight;
}
function fi(){
setTimeout(function(){
fr.onresize=function(){
setTimeout(UpdateCoords,20)}
},200);
}
</script>
</head>
<body onload="fi()">
Select and resize the blue element with your mouse!
<div contenteditable="true" style="border:1px solid #000000; height:220px;">
<div id="dv" style="position: absolute; top: 30px; left: 10px; width: 200px; height: 100px; background-color: blue;">
<iframe name="fr" id="fr" width=100% height=100% style="position: absolute; z-index: -1;" frameborder=0></iframe>
</div>
</div>
<br>
<button id="bt" style="position: absolute; top: 390px; left: 10px; width: 100px; height: 40px;" onclick="if (document.getElementById('dv').style.height=='100px'){document.getElementById('dv').style.height='200px'} else {document.getElementById('dv').style.height='100px';}">Change</button>
<br>
The size of the blue element:<br>
width: <span id="posX" style="color: red"></span><br>
height: <span id="posY" style="color: red"></span>
</body>
</html>
|
| Часовой пояс GMT +3, время: 05:21. |