iFrame 大小隨內容動態變化

Question

我試圖用那個 javascript 做的是 iFrame 一個我在網頁上托管的聊天小部件 - 它最初是一個啟動器，一個小的圓形可點擊圖標，然后啟動到一個全尺寸的窗口。 實際上，我的 iFrame 代碼只是捕獲了整個頁面，並在此外部站點上以特定高度和寬度顯示。 我遇到的問題是 iFrame 是整個頁面，所以特別是當它只是可點擊的小型啟動器時，iFrame 占用了這個外部站點的很大一部分，這顯然不實用，因為它不美觀而且你不能點擊在它下面的內容！ 然后即使擴展了聊天小部件，它仍然不行，

我想要做的是以某種方式 iFrame 首先只是聊天啟動器，然后是小部件展開時的窗口..

我是怎么想的 - 也許 iFrame 會根據內容展開 - 我對此一無所知。 我還想 - 我可以讓聊天啟動器成為頁面的整個大小，只是 iframe，然后當它被點擊時，id 顯然仍然需要客戶端頁面上的 iframe 來擴展內容，或者這可能是一個解決方案擴展 iFrame？

我正在使用的 javascript 代碼：

prepareFrame();

function prepareFrame() {
    console.log("yes this consoles inside of prepareFrame")
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", "https://fb23e954.ngrok.io");
    ifrm.style.width = "640px";
    ifrm.style.height = "480px";
    ifrm.style.position="fixed";
    ifrm.style.right="0";
    ifrm.style.bottom="0";

    document.body.appendChild(ifrm);
}

如果有人能提供幫助，那就太棒了，如果可以的話，謝謝！

Answer 1

為什么不直接使用視口寬度和視口高度而不是 px？

function prepareFrame() {
    console.log("yes this consoles inside of prepareFrame")
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", "https://fb23e954.ngrok.io");
    ifrm.style.width = "80vw";
    ifrm.style.height = "60vh";
    ifrm.style.position="fixed";
    ifrm.style.right="0";
    ifrm.style.bottom="0";

    document.body.appendChild(ifrm);
}