frontend/examples/iframe/index.html


<!--
To integrate ANTELOPE into another website, use the integration html code found in this file.
This will integrate ANTELOPE within an iframe on the website, as well as some javascript code to handle data exchange.
The example gets Text from a user via a textfield and sends it to ANTELOPE for entity mapping via the iframe (function 'queryEntities()').
ANTELOPE will display the results in a select component (e.g. a selectbox) within the iframe.
When the user selects a result within the iframe, a message is send to the parent frame (your website).
The message contains the selected entity data and is processed within the function 'onMessage()'
In the example, the function displays the selected entity data using a <div> tag 'selectedEntity' feel free to change the onMessage function according to your needs and usecases.
-->
<html>
    <body>
        <hr>
        My Website
        <hr>
        <p>Current selected entity:<div id="selectedEntity"></div></p>
        <label for="textToAnnotate">Insert word or text for entity mapping: </label>
        <textarea id="textToAnnotate"> </textarea>
        <button type="submit" onClick="queryEntities()">Search</button>
        <br>
        <br>
        <br>
        <br>
        --- embedded ANTELOPE component ---
        <br>
        <!-- iframe of ANTELOPE -->
        <iframe src="http://localhost:9000/api/annotation/entities/selectcomponent" height="600" width="800" name="AnnotationService select component" id="annotationservice-selectentity-iframe" sandbox="allow-scripts"></iframe>
        <!-- necessary scripts for the ANTELOPE iframe. Implement your own code in function 'onMessage()' below to handle the data from ANTELOPE (e.g entity selection by the user)-->
        <script>
            const iframe = document.getElementById('annotationservice-selectentity-iframe');
            const channel = new MessageChannel();
            const antelopeLocalPort = channel.port1;
            const antelopeIframePort = channel.port2;

            // Wait for the ANTELOPE iframe to load, then exchange ports for sending messages through
            iframe.addEventListener("load", function onLoad() {
                    // Listen for messages from the ANTELOPE iframe (see function 'onMessage()' below)
                    antelopeLocalPort.onmessage = onMessage;
                    // Transfer port2 to the iframe to enable it to send messages to the parent window (your webpage)
                    iframe.contentWindow.postMessage('init', '*', [antelopeIframePort]);
                }
            );

            // Send search text to iframe to search for entities and actualize selectbox
            function queryEntities() {
                console.log("send searchText to iframe ANTELOPE...")
                var searchText = document.getElementById("textToAnnotate").value
                var data = {
                    message: 'antelope-searchEntities',
                    text: searchText
                }; 
                console.log(searchText)
                antelopeLocalPort.postMessage(data)
            }

            // Handle messages received on port1
            function onMessage(e) {
                if(e.data.message === "annotationService-entitySelectionChanged") {
                    // *********************************************************
                    // * insert your own code below to use the selected entity *
                    // *********************************************************
                    var entityStr = JSON.parse(e.data.entity)
                    console.log("Parent window: received message from ANTELOPE --> new entitiy selection:"+entityStr)
                    //var entity = JSON.parse(entityStr)
                    document.getElementById('selectedEntity').innerHTML = JSON.stringify(entityStr)
                    return
                }
                console.err("Parent window: ERROR: received message of unkown type from the ANTELOPE iframe...")
                console.log(e)
            }
        </script>
    </body>
</html>