根據按鈕中的點擊動態更改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更改$scope.chatState 'chatOpened'或'chatClosed' 。

這是一個工作小提琴 ，其中單擊按鈕即可更改狀態。