Perform an action once SurveyMonkey iframe loads

Question

I'm trying to embed a SurveyMonkey survey into a modal window on my site. I can do this successfully, except that first the modal appears and then there's a delay as the iframe loads the external content (this causes a flickering effect as the iframe and its content resizes the modal window).

In an attempt to fix this, I've tried adding a load/ready event targeting the iframe (it doesn't come with an ID or class, so I've had to settle for targeting .smcx-iframe-container > iframe. I think the iframe gets loaded before the event gets attached, however, as my modal doesn't load at all after doing this revision.

Any help or suggestions would be much appreciated!

Script:

// 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();
});

Generated iframe source:

<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>

score 0 · Answer 1 · answered May 09 '19 at 15:58

I know this is old but this might work for people running into this issue.

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


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

Hopefully that helps someone else if not sorry :)

Perform an action once SurveyMonkey iframe loads

1 Answers1