Javascript 不能直接访问 IFrame 中的函数。不过,IFrame 可以访问其父级中的函数。
因此,例如,如果您的主页公开了一个方法 RegisterCallback,则 IFrame 可以将其函数之一作为参数调用它。然后页面可以存储对该函数的引用并在其他时间调用它(使用任何参数...)
更新:添加示例代码
下面的代码是两个文件; index.html 是带有 iframe 的母版页,child.html 是 iframe 内的页面。
我有committed the example to github,你可以test it by following this link。由于浏览器安全限制,代码必须从同一个网络服务器加载,如果直接从文件系统运行则无法运行。
我故意将子 iframe 包含了两次,以说明可以使用此技术注册任意数量的子 iframe。我把它作为练习留给读者添加第三个 iframe... :)
index.html
<html>
<body style="background:#efe">
<h1>This is the master page</h1>
<p><button id="setChildButton" type="button">Make child blue</button></p>
<iframe src="child.html"></iframe>
<iframe src="child.html"></iframe>
</body>
</html>
<script>
var childCallbacks = [];
function registerChild(callback){
console.log('Registering child callback');
childCallbacks.push(callback);
}
function onButtonClick(){
for (var i=0; i < childCallbacks.length; i++){
var callback = childCallbacks[i];
callback('blue');
}
}
window.onload = function(){
document
.getElementById('setChildButton')
.addEventListener('click', onButtonClick);
};
</script>
javascript 有一个函数registerChild(),它从不调用自己,但可以从子页面调用以注册它们的端点。
当按钮被点击时,所有注册的回调函数都会用字符串“blue”调用。然后由孩子的终点来做一些好事。在这种情况下,改变它自己的背景颜色。
child.html
<html>
<body id="childBody" style="background:#fee">
<h2>This is the child page</h2>
</body>
</html>
<script>
function setBackground(color){
var body = document.getElementById('childBody');
body.style.backgroundColor = color;
}
window.onload = function(){
if (parent && parent.registerChild){
console.log('registering with parent');
parent.registerChild(setBackground);
}
};
</script>
子节点的 javascript 检查是否有父节点(它在 iframe 中运行)以及父节点是否提供了一个名为 registerChild() 的函数。然后它通过引用它自己的函数 setBackground() 来调用该函数。
当父级稍后使用字符串“blue”调用回调时,它会转身并将自己的主体背景颜色设置为该值。