Question

我正在尝试将SurveyMonkey调查嵌入到我网站上的模态窗口中。我可以成功地做到这一点，除了首先出现模态，然后在iframe加载外部内容时出现延迟（这会导致像iframe及其内容调整模态窗口大小的闪烁效果）。

为了解决此问题，我尝试添加针对iframe的加载/就绪事件（它没有ID或类，因此我不得不接受定位.smcx-iframe-container > iframe。我认为iframe会在事件附加之前加载，但是，因为我的模态在执行此修订后根本没有加载。

非常感谢任何帮助或建议！

脚本：

// modal.hide();
(function (t, e, s, n) {
    var o, a, c;
    t.SMCX = t.SMCX || [], e.getElementById(n) || (o = e.getElementsByTagName(s), a = o[o.length - 1], c = e.createElement(s), c.type = "text/javascript", c.async = !0, c.id = n, c.src = ["https:" === location.protocol ? "https://" : "http://", "widget.surveymonkey.com/collect/website/js/script.js"].join(""), a.parentNode.insertBefore(c, a))
})(window, document, "script", "smcx-sdk");

$('.smcx-iframe-container > iframe').ready(function () {
    // modal.show();
});

生成的iframe源：

<div class="smcx-widget smcx-embed smcx-show smcx-widget-light">
    <div class="smcx-iframe-container">
        <iframe width="100%" height="100%" frameborder="0" allowtransparency="true" src="https://www.surveymonkey.com/r/9HWYSDW"></iframe>
    </div>
    <div class="smcx-widget-footer smcx-embed-footer">
        <a class="smcx-branding" href="https://www.surveymonkey.com/user/sign-up/?ut_source=powered_by&amp;ut_source2=new_website_collector"
            target="_blank">
            <span class="smcx-powered-by">powered by</span>
        </a>
    </div>
</div>

Answer 1

我知道这已经很老了，但是对于遇到这个问题的人来说可能有用。

var iframe = document.getElementsByTagName("iframe")[0];
iframe.onload = functionAddSomething();


function functionAddSomething(){
    //add something here e.g. modal.show();
}

希望这可以帮助其他人，如果不感到抱歉：）

一旦SurveyMonkey iframe加载，执行操作

1 个答案: