Calling onload in Wordpress wp_footer hook leads to infinite loop

25 views Asked by At

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!

0

There are 0 answers