IFrame子窗口JS方法互相调用和传参

来源：互联网发布：高考失利知乎编辑：程序博客网时间：2024/06/16 10:36

child1.html和child2.html都是父页面parent.html中的一个子iframe，请看child1.html如何调用child2.html中的方法。

parent.html

[xhtml] view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <meta http-equiv="Content-Style-Type" content="text/css">  
        <meta http-equiv="Content-Script-Type" content="text/javascript">  
        <title>jQuery Cookie Plugin</title>  
    </head>  
    <body>  
        <iframe id="myFrame1" src="child1.html" mce_src="child1.html"></iframe>   
    <iframe id="myFrame2" src="child2.html" mce_src="child2.html"></iframe>  
    </body>  
</html>  

child1.html

[xhtml] view plaincopy
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <meta http-equiv="Content-Style-Type" content="text/css">  
        <meta http-equiv="Content-Script-Type" content="text/javascript">  
        <title>jQuery Cookie Plugin</title>  
    <mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script>  
    <mce:script type="text/javascript"><!--  
    function test1() {  
        window.parent.document.getElementById("myFrame2").contentWindow.test2();  
    }  
      
// --></mce:script>  
    </head>  
    <body>  
        <input type="button" onclick="test1();" value="test" />  
    </body>  
</html>  

child2.html

[xhtml] view plaincopy
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <meta http-equiv="Content-Style-Type" content="text/css">  
        <meta http-equiv="Content-Script-Type" content="text/javascript">  
        <title>jQuery Cookie Plugin</title>  
    <mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script>  
    <mce:script type="text/javascript"><!--  
    function test2() {  
        alert("I am your brother");  
    }  
      
// --></mce:script>  
    </head>  
    <body>  
        2  
    </body>  
</html>  

0 0