通过监听message对ifram接口返回值做出回调

本文主要是介绍通过监听message对ifram接口返回值做出回调，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在某些场景下，我们通过ifram引入了第三方页面且需要对该页面的接口返回值做出一些判断的时候就可以利用监听message方法来达到目的（此处不讨论同域下，子页面调用父页面方法的情况）。

首先我们需要确认ifram加载完毕，因为ifram可能因为各种原因导致加载缓慢，之类用到了ifram.onload。然后再对message进行监听，代码如下

function getcode() {var iframe = document.getElementById("ifrm");if (iframe) {iframe.onload = function () {window.addEventListener('message', function (messageFromIframe) {if (messageFromIframe.data.status === 200 || messageFromIframe.data.status === 201) {// do something}})}} else {setTimeout(getcode(), 500);}
}

除了通过ifram.onload我们还可以通过iframe onreadystatechange事件来监听ifram,这里需要注意的是iframe加载页面的过程中会触发三次onreadystatechange事件，对应的情况分别是loading,interactive和complete，我们这里需要的是第三种情况。

var ifram = document.getElementById('ifrm');
ifram.onreadystatechange = function() {if (this.readyState && this.readyState == 'complete') {onComplete();}
}

这篇关于通过监听message对ifram接口返回值做出回调的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---