Выяснилось, что решение описанной проблемы размещено на сайте
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>