如何检查消息(PostMessage)来自哪个跨域iFrame？

沃梦达教程前端问题

2022-01-01

how to check from what crossdomain iframe the message (postMessage) came?(如何检查消息(PostMessage)来自哪个跨域iFrame？)

本文介绍了如何检查消息(PostMessage)来自哪个跨域iFrame？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道MessageEvent有source属性，该属性是发送消息的窗口对象。现在，如何让这些信息检查主文档(当然还有消息到达时的主文档中)中的哪个iframe是该特定消息的来源呢？是否只有在event.source窗口对象上检查location.href然后循环所有IFRAME以检查哪个匹配的选项可用？如果主文档中存在具有相同源url的iframe怎么办？

推荐答案

迭代页面上的所有IFRAME，并对其window对象进行标识比较。

window.addEventListener('message', function(e) {
    if(e.origin === 'https://www.example.com') {
        var iframes = document.getElementsByTagName('iframe');

        for(var i = 0; i < iframes.length; i++) {
            if(e.source === iframes[i].contentWindow) {
                // Do stuff with iframes[i]
            }
        }
    }
}

我相信这在所有现代浏览器中都可以工作；如果有人有问题，我会很感兴趣的。

这篇关于如何检查消息(PostMessage)来自哪个跨域iFrame？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

跨域问题