html 子父视图方法互调

来源：互联网发布：青岛淘宝大学编辑：程序博客网时间：2024/04/27 14:03

父页面：
father.html

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">    <title>这是父页面</title>    <style type="text/css">        button{            margin-top: 20px;        }        iframe{            display: block;            margin-top: 20px;        }    </style></head><body><script type="text/javascript">    //父视图方法    function say() {        alert("父页面方法被调用了！");    }    //调用子视图方法    function callChild() {        frame1.window.say();    }</script><button onclick="callChild()">调用子视图方法</button><iframe name="frame1" src="child2.html"></iframe></body></html>

子页面：
child2.html

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">    <title>这是子页面</title></head><body><script type="text/javascript">    //子视图方法    function say()    {        alert("子页面方法被调用了！");    }    //调用父视图方法    function callParent() {        parent.say();    }</script><button onclick="callParent()">调用父页面方法</button></body></html>

效果图：
这里写图片描述

1 0