zoukankan      html  css  js  c++  java
  • iframe子页面与父页面通信

    father.html通过iframe包含了son.html

    father.html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		 <script type="text/javascript">
            function say(){
                alert("这是father的say()");
            }
            function callChild(){
                myFrame.window.say();
                myFrame.window.document.getElementById("button").value="调用结束"
            }
        </script>
    	</head>
    	<body>
    		 <input id="button" type="button" value="调用son.html中的函数say()" onclick="callChild()"/>
        <iframe name="myFrame" src="son.html"></iframe>
    	</body>
    </html>
    

      son.html

    <html>
    	<head>
    		<meta charset="utf-8" />
    		<script type="text/javascript">
    			function say() {
    				alert("这是son的say()");
    			}
    			function callParent() {
    				parent.say();
    				parent.window.document.getElementById("button").value = "调用结束";
    			}
    		</script>
    	</head>
    	<body>
    		<input id="button" type="button" value="调用father.html中的say()函数" onclick="callParent()" />
    	</body>
    </html>
    

     方法是如何调用的?获取子页面或父页面的window对象,在通过对象调用方法。

    父页面调用子页面方法:FrameName.window.childMethod();
    子页面调用父页面方法:parent.window.parentMethod();

    在方法调用前,以下点必须要注意!!!
    要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:
    1. iframe上用onload事件
    2. 用document.readyState=="complete"来判断
     
    如果文章对你有帮助,麻烦帮忙点个赞哦!嘿嘿!做一个靠谱的技术博主!
  • 相关阅读:
    【CF617D】Roads in Yusland
    对偶问题
    【LG3722】[HNOI2017]影魔
    [HEOI2017] 相逢是问候
    [SHOI2009] 会场预约
    [SCOI2007] 修车
    [CTSC2008] 网络管理
    [国家集训队] 礼物
    [Poetize6] IncDec Sequence
    [网络流24题] 魔术球问题
  • 原文地址:https://www.cnblogs.com/CatcherLJ/p/11175128.html
Copyright © 2011-2022 走看看