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

iFrame大小随内容动态变化

1 个答案: