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);
}