页面嵌套iframe，子框架怎么调用父页面函数

子框架调用父页面函数的方法及跨域问题

最新推荐文章于 2025-09-18 09:03:04 发布

原创最新推荐文章于 2025-09-18 09:03:04 发布 · 702 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端

子框架内调用父页面函数，只需要写上window.parent就可以了。

这是父页面

<!-- 父页面 1.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
        function showMessage() {
            alert('parent message');
        }
    </script>
    
</head>
<body>
    <iframe src="2.html" id="ifr1"></iframe>
</body>
</html>

这是子框架

<!-- 子框架 2.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>子iframe</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>    	
        function callParentMethod() {
						window.parent.showMessage();
        }
    </script>
    
</head>
<body>
    <button id=btn2 onclick="callParentMethod()">调用父页面的方法</button>
</body>
</html>