乐闻世界logo
搜索文章和话题

Calling a parent window function from an iframe

7 个月前提问
5 个月前修改
浏览次数48

1个答案

1

在网页开发中,iframe(内联框架)通常用于在当前页面中嵌入另一个文档。从iframe中调用父窗口的JavaScript函数可以使用parent关键字来实现,这个关键字指向了嵌入iframe的父窗口。不过,需要注意的是,出于安全考虑(同源策略),只有当父窗口和iframe中的内容是同源的(即协议、域名和端口都相同)时,才能够进行这种操作。

下面是一个在iframe中调用父窗口函数的例子:

首先,假设你在父页面定义了一个函数:

html
<!-- 父页面 index.html --> <!DOCTYPE html> <html> <head> <title>父页面</title> <script> function parentFunction() { alert('这是父页面的函数!'); } </script> </head> <body> <iframe src="iframe.html" width="300" height="200"></iframe> </body> </html>

然后,在iframe内部的页面中调用这个函数:

html
<!-- iframe 页面 iframe.html --> <!DOCTYPE html> <html> <head> <title>iframe 页面</title> <script> function callParentFunction() { parent.parentFunction(); } </script> </head> <body> <button onclick="callParentFunction()">调用父页面函数</button> </body> </html>

在这个例子中,当用户点击iframe页面中的按钮时,将会调用定义在父页面上的parentFunction函数,从而显示一个弹窗。

需要注意的是,在实际使用中,由于浏览器的安全策略,可能会有跨域限制,所以在不同域之间进行此类操作可能会导致安全错误。 若要在不同域的iframe和父窗口之间进行通信,可以使用window.postMessage方法来安全地实现。

2024年6月29日 12:07 回复

你的答案