Работа с фреймами JS

272

07 февраля 2020, 23:40

Задание: создайте два фрейма, которые делят окно пополам. В одном из них находиться кнопка, нажимая на которую меняется цвет во втором фрейме.

Файл index.html

<html>
    <head>
        <title>Задание</title>
        <meta charset="UTF-8">
    </head>
    <frameset cols="50%,50%">
        <frame src="dev/1-1.html" name="frame_1">
        <frame src="dev/1-2.html" name="frame_2">
    </frameset>
</html>

Далее не понимаю как работать с фреймами, из каких файлов и как к ним обращаться Объясните, пожалуйста

Answer 1

Можно посылать сообщения от фрейма родителю при помощи:

.dispatchEvent()

Сниппет криво работает с iframe, поэтому вот рабочий пример

    <iframe id="first"></iframe><iframe id="second"></iframe>
    <script>
        document.addEventListener('eventToParent', event => {
            document.querySelector('#second').contentDocument.body
                .style.backgroundColor = `hsl(${event.detail*255},70%, 50%)`;
        });
        document.querySelector('#first').contentDocument.write(`
            <button onclick="sendMessage(Math.random())">sendMessage<\/button>
            <script>
                let sendMessage = msg => {
                    window.parent.document.dispatchEvent(new CustomEvent("eventToParent", {
                        detail: msg
                    }));
                }
            <\/script>
        `);
    </script>