Embedding Chytanka on Your Website

This document explains how to embed a Chytanka iframe into your website.

Introduction

This HTML page embeds a Chytanka iframe, which loads an external educational resource. The page also includes a script to handle communication between the iframe and the parent document to display the current page and total number of pages within the iframe.

Usage

1. HTML Structure: Copy the provided HTML structure and paste it into your webpage.
2. Iframe Source URL: The iframe src attribute points to the Chytanka content you want to embed. In this example, it loads a specific resource from Chytanka.

<iframe src="https://chytanka.github.io/imgur/5Bevu4v?vm=3&lang=en" style="width: 100%; aspect-ratio: 3/2; overflow: auto; resize: vertical; max-height: 90dvh; padding-bottom: 1ch;" allowfullscreen frameborder="0"></iframe>
<label for="outCurrent">Page: </label>
<output id="outCurrent"></output>
<label for="outTotal">from </label>
<output id="outTotal"></output>

<script>
    window.addEventListener('message', function (event) {
        if (event.data.type !== 'changepage') return;
        const msg = event.data.message
        outTotal.value = msg.total;
        outCurrent.value = msg.current.join(', ')
    }, false);
</script>

Customization

Iframe Attributes: Adjust the style attribute of the <iframe> element to fit the iframe within your layout. The example uses:

• width: 100%: Ensures the iframe spans the full width of its container.
• aspect-ratio: 3/2: Maintains a 3:2 aspect ratio.
• overflow: auto: Allows scrolling if the content exceeds the iframe dimensions.
• resize: vertical: Enables vertical resizing.
• max-height: 90dvh: Limits the iframe height to 90% of the viewport height.
• padding-bottom: 1ch: Adds space at the bottom for better appearance.

Communication Between Parent and Iframe

The parent page listens for messages from the iframe to update the current page and total pages displayed. The iframe sends messages of type changepage, containing the current and total page numbers.

window.addEventListener('message', function (event) {
    if (event.data.type !== 'changepage') return;
    const msg = event.data.message;
    outTotal.value = msg.total;
    outCurrent.value = msg.current.join(', ');
}, false);

Dependencies

This embedding requires no external libraries or frameworks. It relies on standard HTML, CSS, and JavaScript.