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

为什么不直接使用Viewport Width and Viewport Height 而不是 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);
}