3

我目前正在开发一个小部件项目，您单击一个按钮并在上方打开一个气泡。所有这些都在动态创建的 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 仍然存在，因为它仍然包含气泡，并且当我检查它时，虽然我已将边距设置为 0，但它看起来徽标按钮具有正确的边距。

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

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

4

1 回答 1

0

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

myIFrame.iframeResizer.size()

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

于 2017-04-13T13:33:25.087 回答