当前位置: 代码迷 >> JavaScript >> IFrame子窗口JS步骤互相调用和传参
  详细解决方案

IFrame子窗口JS步骤互相调用和传参

热度:192   发布时间:2012-09-19 13:43:54.0
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>

  相关解决方案