iframe 父页面与子页面之间的方法的相互调用

2024-04-27 15:11:32

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>Parent Page</title>        <script language="javascript" type="text/Javascript">            function parenttest() {                alert("这是父页面的方法！");            }            function btnClick() {                document.getElementById("childframe").contentWindow.childtest(); //调用子页面            }    </script></head><body>   <div style="margin:auto;">       <h1>This is the Parent Page.</h1>       <input type="button" value="调用子页面的方法"  onclick="btnClick()"/>     </div>    <div style="margin:auto;">       <iframe style="width:300px; height:300px;" id="childframe" src="ChildPage.html"></iframe>    </div></body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>Parent Page</title>        <script language="javascript" type="text/javascript">            function parenttest() {                alert("这是父页面的方法！");            }            function btnClick() {                document.getElementById("childframe").contentWindow.childtest(); //调用父页面            }    </script></head><body>   <div style="margin:auto;">       <h1>This is the Parent Page.</h1>       <input type="button" value="调用子页面的方法"  onclick="btnClick()"/>     </div>    <div style="margin:auto;">       <iframe style="width:300px; height:300px;" id="childframe" src="ChildPage.html"></iframe>    </div></body></html>

上一篇：JS之柱状图

下一篇：简单模拟js的模块化依赖