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 !

https://stackoverflow.com/questions/3574623/css-displaynone-and-visibilityhidden — awiebe, Oct 20 '18 at 00:20
Thank you for your answer, but I always need to show the bubble in website, and if I do "display : none", the bubble will disappear ... — PalmThreeStudio, Oct 20 '18 at 00:22

score 1 · Answer 1 · answered Oct 20 '18 at 05:22

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.

Create a stylesheet class for both states of the iFrame: chatOpened and chatClosed, and set the height and width in each class.
In your iFrame, use <iframe ng-class="chatState"></iframe>
Create $scope.chatState in the controller.
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.

Thank you for you answer, I try to do it but my controller go undefined ... I posted a new question here if you want to check my code : https://stackoverflow.com/questions/52904550/create-an-button-in-javascript-who-contain-angularjs-controller — PalmThreeStudio, Oct 20 '18 at 10:15

Dynamically change iframe size depending on button click in it

1 Answers1