Question

我目前正在使用一个小部件项目，您点击一个按钮，上面会打开一个气泡。所有这些都在动态创建的iframe中。我正在使用@davidjbradshaw的Iframe-Resizer根据内容调整iframe的大小。到目前为止，高度调整功能完美无缺。我的问题是当我打开它后关闭气泡时，iframe的宽度不会调整回原始大小。

以下是iframe

中的 html

<div class="content">
<div id="bubble_wrapper" class="bubble_wrapper hide">
    <div id="speech-bubble" class="speech-bubble">
        <div class="widget-content">';
            <p class="introduction" style="font-family:Calibri,Helvetica, Arial, sans-serif; font-size:small;"> intro </p>
            <hr>
            <p class="social-media"> MESSENGERS </p>'
            <div class="providers-imgs">
                <a>..</a>
                <a>..</a>
                <a>..</a>
            </div>
            <hr>
        </div>
    </div>
    <div class="bubble_arrow"></div>
</div>
<div id="logo_wrapper">
    <div id="logo-button" style="background-color:#F1E9F1;">
        <img id="logo" src="/img/o-icon.png" style="width:38px; height:38px;">
    </div>
</div>

以下是显示和隐藏气泡的 javascript 代码：

document.addEventListener("DOMContentLoaded", function(event) {

var _isMobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/Windows Phone/i);

document.getElementsByTagName('head')[0].appendChild(buildHeader());
document.getElementById("content").innerHTML = buildHtml();
addListeners()

function addListeners() {
    var bubble = document.getElementById('bubble_wrapper');
    var logo = document.getElementById('logo');

    logo.addEventListener('click', function() {
        if (_isMobile) logo_wrapper.classList.add('hide')

        if (bubble.classList.contains('hide'))
            bubble.classList.remove('hide')

        else
            bubble.classList.add('hide')

    }, false)

我尝试在EventListener（）中更改iframe的宽度，但它不起作用。我还注意到，当我关闭气泡后，iframe宽度保持不变，因为它仍然包含气泡，当我检查它时，看起来徽标按钮有边距 - 尽管我已将边距设置为0.

使用iframe-resizer时是否有人遇到相同或类似的问题？任何建议，提示或帮助将不胜感激。

这是应用的截图，因为它仍然只在本地运行。 https://drive.google.com/a/orat.io/file/d/0B12BLLTyY7C2TEhPTnFVMHBHTkE/view?usp=sharing

Answer 1

您可以强制iframe从JS调整大小。

myIFrame.iframeResizer.size()

如果这不起作用，则问题可能出在您的HTML上。

@ davidjbradshaw的iframe-resizer，iframe宽度没有调整大小

1 个答案: