Динамически изменять размер фрейма в зависимости от нажатия на него

Question

Я создаю чат (с разговором, отображаемым при нажатии на всплывающее окно) для моего сайта и на сайте моего клиента с AngularJS.Когда я хочу реализовать его с помощью iframe, он работает как шарм, но я должен определить ширину и высоту вручную.

Проблема здесь: когда разговор закрыт, пузырь всегда виден, ноШирина и высота iframe блокируют часть экрана (см. рисунок) ...

Поэтому мой ответ здесь: Как я могу адаптировать ширинуи высота Iframe в зависимости от нажатия кнопки?Я уже пытаюсь содержать iframe в div, но он бесполезен ...

Мой JS:

var a = document.createElement('iframe');
        a.setAttribute("id", "myIframe");
        a.setAttribute("src", "chats.html");
        a.setAttribute("scrolling", "no");
        a.style="width: 1px;min-width:100%;";
        var d = document.createElement('div');
        d.setAttribute("class", "chat");
        d.setAttribute("id", "chat");
        d.style="position: fixed;right: 0px;z-index: 9999;width: 400px;height: 755px;bottom: 0px !important;border: none;";
        document.querySelector('body').appendChild(d);
        document.querySelector('.chat').appendChild(a);
        document.querySelector('body').appendChild(s2);

Если это невозможно, я уже пытаюсь разделить контейнер разговора и кнопку всплывающей подсказки.в 2 iframe, когда я нажимаю на кнопку, он может отображать второй iframe с контейнером беседы.Но проблема в том, что нажатие кнопки не влияет на второй div, даже если они находятся в одном домене и имеют одинаковое ng-приложение и один и тот же ng-контроллер ...

Пожалуйста, спасите мою жизнь!

Спасибо всем!

Answer 1

Похоже, вы создали iFrame в vanilla Javascript, что, вероятно, не очень хорошая идея в приложении Angular, но я предполагаю, что ваш iFrame имеет доступ к Angular для моего ответа.

1. Создайте класс таблицы стилей для обоих состояний iFrame: chatOpened и chatClosed и установите height и width в каждом классе.

2. Вваш iFrame, используйте <iframe ng-class="chatState"></iframe>

3. Создать $scope.chatState в контроллере.

4. Измените $scope.chatState на 'chatOpened' или 'chatClosed' всякий раз, когда вы хотите расширить или сжать iframe.

Вот Рабочая скрипка , в которой нажатие кнопки изменяет состояние.