iframe.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>LUDOK iFrame</title>

    <script type="text/javascript" src="jquery/jquery-3.7.1.min.js"></script>

    <script>

        function receiveMessage(event) {
            // Höhenanpassung des umgebenden div "div_iFrame" des LUDOK-iFrames
            // (Die ID des iFrames (ifr_LUDOK) wird in jsonData.id übergeben
            // und kann zur Identifizierung des Aufrufers genutzt werden)

            var jsonData = JSON.parse(event.data);
            $('#div_iFrame').height(jsonData.docHeight);

        } // receiveMessage

        window.addEventListener("message", receiveMessage, false);

    </script>


    <style>
        body {
            height: 100%;
            margin: 0;
            background-color: lightblue;
        }

        .div_iFrame {
            height: 500px;
        }
    </style>
</head>

<body>

<div class="div_iFrame" id="div_iFrame">
    <iframe src="index.html" id="ifr_LUDOK" width="100%" height="100%" />
</div>

</body>

</html>