iframe 问题

现在的问题是 ,网站是用iframe写的,分为top,left,right三个部分,现在我想在top页面执行一个方法,然后在right页面弹出一个窗口,怎么实现呢?

阅读 2.8k
4 个回答

题主的问题本质是:iframe子页面内执行另外一个iframe子页面的javascript方法

我贴代码:
main.html 主窗口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <iframe name="i1" id="i1" src="1.html" height="300" width="100%"></iframe>
        <iframe name="i2" id="i2" src="2.html" height="300" width="100%"></iframe>
    </body>
</html>

i1.html 是你的top页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h2>这是top iframe</h2>
        <button type="button" onclick="rightShow()">执行Right弹窗方法</button>
        <script>
            function rightShow(){
                // 获取父窗口顶层对象
                $parent = window.parent;
                // 获取right窗口对象
                $right = $parent.document.getElementById("i2").contentWindow;
                // 执行right窗口弹窗方法
                $right.showWindow();
            }
        </script>
    </body>
</html>

i2.html 是你的right页面

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

    <body>
        <h3>这是right iframe</h3>
        <script>
            // 这就是right的弹窗方法
            function showWindow() {
                alert('window shown!');
            }
        </script>
    </body>

</html>
$(top.document).find("#iframe-right-id").contents().find("#popdiv").show();

top可以通过postmessage传递消息过去,在right页面绑定messgae事件,top传消息给right的时候会触发这个事件,到时候在这个事件里面根据内容调用你想要调用的方法

1在父页面定义方法

function func(){
    window.frames["right的name值"]//对iframe操作
}
//top页面
top.func();

2 直接同级iframe调用

//top
top.frames["right的name值"]//对iframe操作
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题