html 如何在iframe和父站点之间进行通信?

7eumitmz  于 2023-02-06  发布在  其他
关注(0)|答案(7)|浏览(126)

iframe中的网站不在同一个域中,但都是我的,我想在iframe和父网站之间进行通信,可以吗?

dy1byipe

dy1byipe1#

使用event.source.window.postMessage发送回发件人。
来自Iframe

window.top.postMessage('I am Iframe', '*')
window.onmessage = (event) => {
    if (event.data === 'GOT_YOU_IFRAME') {
        console.log('Parent received successfully.')
    }
}

然后从家长那里说回来。

window.onmessage = (event) => {
    event.source.window.postMessage('GOT_YOU_IFRAME', '*')
}
eiee3dmh

eiee3dmh2#

window.top属性应该能够给予您所需要的内容。
例如

alert(top.location.href)

参见http://cross-browser.com/talk/inter-frame_comm.html

tcbh2hod

tcbh2hod3#

您也可以使用
postMessage(message, '*') ;

eiee3dmh

eiee3dmh4#

在花了2天的时间试图让一个iFrame将消息发布回父应用程序(在我的情况下是一个Vue应用程序)之后,我遇到了这个极好的参考:
https://dev-bay.com/iframe-and-parent-window-postmessage-communication/
从iframe到父级:

const parentWindow = window.parent;
    class Message {
        constructor(type, body) {
          this.type = type;
          this.body = body;
        }
    };

    function sendMessage (windowObj, payload) {
        if(windowObj) {
          windowObj.postMessage(payload, "*");
        }
    };

    //Then call appropriately: 
    sendMessage(parentWindow, new Message("button-click", "Show Stats Overlay"));

在父级中,我的Vue应用程序装载了生命周期事件,但请参考链接以满足您自己的需求:

window.addEventListener("message", (e) => {
        var data = e.data;
        console.log("RECEIVED message from CHILD TO PARENT", data);
        
        var type = data.type;
        var body = data.body;

        if(type === "button-click" && body) {
          console.log("button-click RECEIVED FROM CHILD")
          //Additional functionality ...
        } else if (type === "text-msg" && body) {
          console.log("TEXT MESSAGE RECEIVED FROM CHILD");
          //Additional functionality ...
        }
      });

有关父代与iFrame之间的通信示例,请参见参考文件。
希望这对其他人有帮助。

7ajki6be

7ajki6be5#

对于不同的域,不可能直接调用方法或访问iframe的内容文档。
您必须使用cross-document messaging

父级-〉iframe

例如,在顶部窗口中:

myIframe.contentWindow.postMessage('hello', '*');

在iframe中:

window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

iframe -〉父级

例如,在顶部窗口中:

window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

在iframe中:

window.top.postMessage('hello', '*')
nr9pn0ug

nr9pn0ug6#

在2018年和现代浏览器中,您可以从iframe向父窗口发送自定义事件。
iframe:

var data = { foo: 'bar' }
var event = new CustomEvent('myCustomEvent', { detail: data })
window.parent.document.dispatchEvent(event)

父母:

window.document.addEventListener('myCustomEvent', handleEvent, false)
function handleEvent(e) {
  console.log(e.detail) // outputs: {foo: 'bar'}
}

PS:当然,你也可以用同样的方式向相反的方向发送事件。

document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)
a1o7rhls

a1o7rhls7#

此库支持HTML5 postMessage和带有resize+hash https://github.com/ternarylabs/porthole的传统浏览器
编辑:现在在2014年,IE6/7的使用率相当低,IE8和最重要的是支持postMessage,所以我现在建议只使用它。
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

相关问题