html中iframe调用兄弟iframe中的js方法

最新推荐文章于 2024-08-21 10:36:19 发布

罗汉爷

最新推荐文章于 2024-08-21 10:36:19 发布

阅读量3.5k

点赞数 2

分类专栏： Web前端文章标签： iframe调用

本文链接：https://blog.csdn.net/IndexMan/article/details/79175530

版权

Web前端专栏收录该内容

41 篇文章 3 订阅

订阅专栏

问题说明

最近工作中碰到一个页面有一个主iframe A，用于操作主要业务元素。其中有一个弹出框里面也嵌入了一个iframe B，

此时，我需要在B中调用A中JS的指定方法。下面咱们来通过例子还原一下这个场景，看如何实现的。

主页面html

testframe.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <iframe id="frame1" src="frame1.html" width="400px" height="300px"></iframe>
    <iframe id="frame2" src="frame2.html" width="400px" height="300px"></iframe>
</body>
</html>

iframe1即A页面

frame1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe1</title>

    <script type="text/javascript">
        function frame1_func() {
            alert("你调用了frame1的函数！");
        }
    </script>
</head>

<body>
<h1>这是iframe1</h1>
</body>
</html>

iframe2即B页面

frame2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe2</title>
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">

        function frame2_func(){
            //调用frame1_func
            $(window.parent.document).contents().find("#frame1")[0].contentWindow.frame1_func();
        }
    </script>
</head>

<body>
    <h1>这是iframe2</h1><br>
    <button id="clickMe" οnclick="frame2_func()">点击我调用frame1方法</button>
</body>
</html>