根据按钮中的点击动态更改iframe大小

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-app和相同的ng-controller ...

请救我的命！

谢谢大家！

Answer 1

您似乎已经用香草Javascript创建了iFrame，这在Angular应用中可能不是一个好主意，但是我认为您的iFrame可以访问Angular来回答我的问题。

1. 为iFrame的两个状态chatOpened和chatClosed创建样式表类，并在每个类中设置height和width。

2. 在您的iFrame中，使用<iframe ng-class="chatState"></iframe>

3. 在控制器中创建$scope.chatState。

4. 每当您要扩展或收缩iframe时，请将$scope.chatState更改为'chatOpened'或'chatClosed'。

这是Working Fiddle，其中单击按钮即可更改状态。