javascript - @davidjbradshaw 的 iframe-resizer，iframe 宽度不调整

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-width 保持不变，因为它仍然包含气泡，当我检查它时，它看起来像 Logo 按钮有 margin-right，尽管我已将边距设置为 0。

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

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

Answer 1

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

myIFrame.iframeResizer.size()

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