Dynamically change iframe size depending on button click in it

Question

I create a chat (With conversation displayed on click in bubble) for my website and in my client's website with AngularJS. When I want to implement it with iframe, it's work like a charm, but I have to define an manual width and height.

The problem is here : When the conversation is closed, the bubble is always visible but the iframe width and height block a part of screen (Look the picture) ...

So my answer is here : How can I adapt the width and height of Iframe depending on button click ? I already try to contain the iframe in div but it's useless ...

My 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);

If it is not possible, I already try to separate the conversation container and bubble button in 2 iframe, when I click in button, it can display the second iframe with conversation container. But the problem is the button click don't have any effect in second div even if they are in same domain and have the same ng-app and the same ng-controller ...

Please, save my life !

Thank you all !

Answer 1

It looks like you've created the iFrame in vanilla Javascript which is probably not a good idea in an Angular app, but I'll assume your iFrame has access to Angular for my answer.

1. Create a stylesheet class for both states of the iFrame: chatOpened and chatClosed , and set the height and width in each class.

2. In your iFrame, use <iframe ng-class="chatState"></iframe>

3. Create $scope.chatState in the controller.

4. Change $scope.chatState to either 'chatOpened' or 'chatClosed' whenever you want to expand or contract the iframe.

Here is a Working Fiddle in which a button click changes the state.