Размер iFrame для динамического изменения содержимого

Question

То, что я пытаюсь сделать с этим javascript - это iFrame виджет чата, который я размещаю на веб-странице - изначально это лаунчер, маленький круглый кликабельный значок, Который затем запускается в полноразмерное окно. На самом деле, мой код iFrame просто захватывает всю страницу и показывает, что На определенной высоте и ширине на этом внешнем сайте. У меня проблема в том, что iFrame - это вся страница, особенно когда она Небольшой кликабельный лаунчер, iFrame занимает большой кусок этого внешнего сайта, который, очевидно, не практичен, так как Невероятно, и вы не можете нажимать на контент под ним! А потом даже с расширенным виджетом чата все еще не все в порядке,

Что я хочу сделать, так это каким-то образом iFrame сначала просто запустить чат, а затем окно, когда виджет развернут.

Как я думал сделать это - возможно, расширить iFrame в зависимости от содержимого - я понятия не имею по этому поводу. Я также подумал: могу ли я запустить чат-пусковую установку на весь размер страницы, просто вставив ее, затем, когда она нажата, идентификатор, очевидно, все еще Нужен ли 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);
}