Html iFrame 之间的通信?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16657399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:36:02  来源:igfitidea点击:

Communication between iFrames?

javascripthtmliframe

提问by Matthew

How can you make two iFrames talk to each other? For example I was a element value off the 2nd iframe and the 1st iframe has the display element on it. I need to get the value off the 2nd frame to the 1st. How would I do this? Don't say use cookies, cause that will hurt with massive sum of data.

如何让两个 iFrame 相互通信?例如,我是第二个 iframe 的元素值,而第一个 iframe 上有显示元素。我需要从第二帧到第一帧的值。我该怎么做?不要说使用cookies,因为这会受到大量数据的伤害。

回答by jbabey

If the <iframe>elements are served from the same domain, then they can access each other directly. For example, in iframe1you could do:

如果<iframe>元素来自同一个域,则它们可以直接相互访问。例如,iframe1你可以这样做:

document.getElementById('someDiv').innerHTML = 
    top.document.getElementById('otherIframe').contentWindow.
    document.getElementById('someOtherDiv').innerHTML;

回答by Katana314

I'll warn you first off that you will need full code-modification abilities for both iframes. Iframes are treated with strict security; otherwise, I could make a domain "bunkofamerica.com", put "bankofamerica.com" in an iframe, and then analyze the user's password as they type it. (Banks tend to have iframe-busting code anyway, but still...)

我会首先警告您,您将需要两个 iframe 的完整代码修改功能。iframe 受到严格的安全保护;否则,我可以创建一个域“bunkofamerica.com”,将“bankofamerica.com”放入 iframe,然后在用户输入密码时分析用户密码。(无论如何,银行往往都有破坏 iframe 的代码,但仍然......)

You're looking for this native function: https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage

您正在寻找此本机功能:https: //developer.mozilla.org/en-US/docs/Web/API/window.postMessage

And here's a github library my company uses to make this more cross-browser compatible: https://github.com/daepark/postmessage

这是我公司用来提高跨浏览器兼容性的 github 库:https: //github.com/daepark/postmessage

jbabey is correct, if iframes are in the same domain and protocol, then it's easier.

jbabey 是正确的,如果 iframes 在同一个域和协议中,那么它更容易。

Opera Docs explained this with best relevant examples https://dev.opera.com/articles/window-postmessage-messagechannel/#channel

Opera Docs 用最相关的例子解释了这一点https://dev.opera.com/articles/window-postmessage-messagechannel/#channel

回答by Matt Berkowitz

First things first, the only way a frame can interact outside of it's self is if the content loaded in both places is from the same domain otherwise you're going to get a CORS error.

首先,框架可以在其自身之外进行交互的唯一方式是,如果在两个地方加载的内容来自同一个域,否则您将收到 CORS 错误。

Assuming that's all gravy, I'd create an manager object on the window object of the parent frame.

假设这都是肉汁,我会在父框架的窗口对象上创建一个管理器对象。

window.Mgmt = {
    frame1: $('iframe#frame1'),
    frame2: $('iframe#frame2')
}

then in either of the iframes you should be able to access that object using window.parent.Mgmt.frame1, etc

然后在任何一个 iframe 中,您都应该能够使用window.parent.Mgmt.frame1等访问该对象