Javascript 根据在iframe中单击的按钮动态更改iframe大小

我用AngularJS为我的网站和我的客户的网站创建了一个聊天室（在泡泡中点击显示对话）。 当我想用iframe实现它时，它的工作就像一个符咒，但我必须定义一个手动宽度和高度

问题在于：当对话结束时，气泡始终可见，但iframe的宽度和高度会挡住屏幕的一部分（请看图片）

所以我的答案是：如何根据按钮点击调整Iframe的宽度和高度？ 我已经尝试在div中包含iframe，但它没有用

我的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中分离对话容器和气泡按钮，当我单击in按钮时，它可以显示带有对话容器的第二个iframe。 但问题是按钮点击在second div中没有任何效果，即使它们在同一个域中，并且具有相同的ng应用程序和相同的ng控制器

求求你，救我一命

---

谢谢大家!

看起来您已经用香草Javascript创建了iFrame，这在Angular应用程序中可能不是一个好主意，但我假设您的iFrame可以访问Angular以获取我的答案

为iFrame的两种状态创建样式表类：

chatOpen

和

chatClosed

，并在每个类中设置

高度和
宽度

在iFrame中，使用

在控制器中创建

$scope.chatState

每当您想要展开或收缩iframe时，将

$scope.chatState

更改为

'chatOpen'

或

'chatClosed'

---

这里是一个按钮点击改变状态的对话框。

谢谢你的回答，但我总是需要在网站上显示气泡，如果我选择“显示：无”，气泡将消失…谢谢你的回答，我尝试这样做，但我的控制器没有定义。。。如果您想查看我的代码，我在此处发布了一个新问题：