I'm trying to send a postMessage onresize and onload. The onresize part works perfectly, but the onload part leads to an infinite loop instead of only getting called once.
That's the code in functions.php:
function addingListeners(){
?>
<script>
console.log("in script");
window.onload = function() {
console.log("in load");
parent.postMessage({height: document.body.scrollHeight}, '*')
};
window.onresize = function() {
console.log("in resize");
parent.postMessage({height: document.body.scrollHeight}, '*');
};
</script>
<?php }
add_action("wp_footer", "addingListeners");
I tried the following:
function addingListeners(){
?>
<script>
console.log("in script");
window.addEventListener('load', addOnLoad())//, {once: true}
function addOnLoad() {
console.log("in load");
parent.postMessage({height: document.body.scrollHeight}, '*')
window.removeEventListener('load', addOnLoad())
};
window.onresize = function() {
console.log("in resize");
parent.postMessage({height: document.body.scrollHeight}, '*');
};
</script>
<?php }
add_action("wp_footer", "addingListeners");
and:
function addingListeners(){
?>
<script>
console.log("in script");
window.addEventListener('load', addOnLoad(),{once: true});
function addOnLoad() {
console.log("in load");
parent.postMessage({height: document.body.scrollHeight}, '*');
};
window.onresize = function() {
console.log("in resize");
parent.postMessage({height: document.body.scrollHeight}, '*');
};
</script>
<?php }
add_action("wp_footer", "addingListeners");
I'm very thankful for your time!