基本上，我iframe在页面中嵌入了一个，并且iframe有一些我需要从父页面调用的JavaScript例程。
现在相反很简单，因为你只需要调用parent.functionName()，但不幸的是，我需要的恰恰相反。
请注意，我的问题是不会改变的源URL的iframe，但是调用在定义的函数iframe。
从父页面调用 iframe 中的 JavaScript 代码
IT技术
javascript
html
iframe
2021-01-26 02:05:08
6个回答
假设您的 iFrame 的 id 是“targetFrame”，您要调用的函数是targetFunction()：
document.getElementById('targetFrame').contentWindow.targetFunction();
您还可以使用window.frames代替访问框架document.getElementById。
// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction();
这里有一些怪癖需要注意。
HTMLIFrameElement.contentWindow可能是更简单的方法，但它不是一个标准属性，有些浏览器不支持它，主要是较旧的浏览器。这是因为 DOM Level 1 HTML 标准对window对象没有任何说明。您也可以尝试
HTMLIFrameElement.contentDocument.defaultView，这是一些较旧的浏览器允许但 IE 不允许的。即便如此，标准并没有明确说明您取回window对象，原因与 (1) 相同，但如果您愿意，可以在此处选择一些额外的浏览器版本。window.frames['name']返回窗口是最古老的，因此也是最可靠的接口。但是您必须使用一个name="..."属性才能按名称获取框架，这有点丑陋/不推荐使用/过渡。（id="..."会更好，但 IE 不喜欢那样。）window.frames[number]也非常可靠，但知道正确的索引是诀窍。你可以摆脱这个，例如。如果您知道页面上只有一个 iframe。完全有可能子 iframe 尚未加载，或者其他问题使其无法访问。您可能会发现反转通信流更容易：也就是说，让子 iframe
window.parent在完成加载并准备好被回调时通知它的脚本。通过将它自己的一个对象（例如回调函数）传递给父脚本，该父脚本可以直接与 iframe 中的脚本通信，而不必担心它与什么 HTMLIFrameElement 相关联。
调用父 JS 函数iframe是可能的，但前提是父级和加载的页面iframe来自同一个域，即 abc.com，并且都使用相同的协议，即两者都在http://或https://.
在以下提到的情况下，调用将失败：
- 父页面和 iframe 页面来自不同的域。
- 他们使用不同的协议，一种在 http:// 上，另一种在 https:// 上。
对此限制的任何解决方法都将是非常不安全的。
例如，假设我注册了域 superspiringcontest.com 并发送了指向人们电子邮件的链接。当他们加载主页时，我可以iframe在那里隐藏一些s 并阅读他们的 Facebook 提要，检查最近的亚马逊或paypal交易，或者——如果他们使用的服务没有实现足够的安全性——从他们的账户中转账帐户。这就是为什么 JavaScript 仅限于同域和同协议。
在 IFRAME 中，将您的函数公开给 window 对象：
window.myFunction = function(args) {
doStuff();
}
要从父页面访问，请使用：
var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);
如果 iFrame 的目标和包含文档在不同的域中，之前发布的方法可能不起作用，但有一个解决方案：
例如，如果文档 A 包含一个包含文档 B 的 iframe 元素，并且文档 A 中的脚本在文档 B 的 Window 对象上调用 postMessage()，那么将在该对象上触发消息事件，标记为源自文档 A。文档 A 中的脚本可能如下所示：
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');
要为传入事件注册事件处理程序，脚本将使用 addEventListener()（或类似机制）。例如，文档 B 中的脚本可能如下所示：
window.addEventListener('message', receiver, false);
function receiver(e) {
if (e.origin == 'http://example.com') {
if (e.data == 'Hello world') {
e.source.postMessage('Hello', e.origin);
} else {
alert(e.data);
}
}
}
该脚本首先检查域是否为预期域，然后查看消息，它要么向用户显示该消息，要么通过将消息发送回最初发送消息的文档来响应。