У меня на странице размещен фрейм, размер которого может динамически меняться, поэтому каждые 100мс во фрейме выполняется postMessage для передачи его высоты родителю (основному окну).
Но если на страницу добавить еще один фрейм, то postMessage каждого из них будет менять размер сразу обоих фреймов.
Ниже представлен мой код:
Главная страница
<div>
<script type="text/javascript">
var myEventMethod =
window.addEventListener ? "addEventListener" : "attachEvent";
var myEventListener = window[myEventMethod];
var myEventMessage =
myEventMethod == "attachEvent" ? "onmessage" : "message";
myEventListener(myEventMessage, function (e) {
if (e.data === parseInt(e.data))
document.getElementById('my-iframe-id').height = e.data + "px";
}, false);
</script>
<iframe id="my-iframe-id" src='./widget-example.html' frameborder="0" width="100%" height="100%"> </iframe>
</div>
<hr>
<script type="text/javascript">
var m = window.addEventListener ? "addEventListener" : "attachEvent";
window[m](m == "attachEvent" ? "onmessage" : "message", function (e) {
if (e.data === parseInt(e.data))document.getElementById('widget-id-2').height = e.data + "px";
}, false);
</script>
<iframe src='./widget-example2.html' id='widget-id-2' frameborder='0' width='100%' height='100%'> </iframe>
Содержимое фреймов
<script type="text/javascript">
function postm() {
window.parent.postMessage(
document.body.scrollHeight, "*"
)
}
setInterval(postm, 100);
</script>
Подскажите, пожалуйста, как сделать так, чтобы высота каждого фрейма передавалась индивидуально? Реализовать надо без использования jQuery.
Желательно, если можно, приложите рабочий код.
Большое спасибо.
document.body.scrollHeight
на что-то вроде{ sender: 'frame1', height: document.body.scrollHeight }
?