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

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



--------------------------------------------------------------------------------
parent.html

view plaincopy to clipboardprint?
<!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> 
<!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

view plaincopy to clipboardprint?
<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> 
<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

view plaincopy to clipboardprint?
<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> 
<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>

猜你喜欢

转载自mzlly999.iteye.com/blog/1028230
今日推荐