根据按钮单击动态更改 iframe 大小

Question

我使用 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 中将对话容器和气泡按钮分开，当我单击按钮时，它可以显示带有对话容器的第二个 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，其中单击按钮会更改状态。