Js ifame和父窗口内函数如何互调

最新推荐文章于 2023-09-06 17:07:18 发布

原创最新推荐文章于 2023-09-06 17:07:18 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #system #object #null #iframe #脚本

Js 同时被 2 个专栏收录

30 篇文章

订阅专栏

Html

6 篇文章

订阅专栏

本文介绍了一种在父页面与iframe子页面间进行JavaScript交互的方法。通过定义特定的函数，父页面可以调用子页面的功能，反之亦然。此方法依赖于同源策略，确保了跨窗体间的有效沟通。

页面A，其内部有个iframe，部分 html代码如下:

<div><iframe name="ifm" width="100%" height="829" id="ifmApp" src="B.asp?co=1&tp=5&ut=1&id=&gd=11&gm=1&ar=2&sv=0" frameBorder="0" marginWidth="0" marginHeight="0" scrolling="no"></div>

A页面中有段js脚本如下：

var System={    
    CloseFrame:function () {
        try{
                var frames=document.getElementById("ifmApp"); 
                var AppHelper= frames.contentWindow.AppHelper; 
                if(AppHelper!=null && typeof(AppHelper)=="object"&&typeof(AppHelper.CloseQuery)=="function"){                
                    if(!AppHelper.CloseQuery())return ; 
                }
            }catch(e){            
            }    
       System.Close();
    },
    Close:function () {
        document.body.removeChild(ifrm);
    }   
};

iframe src所对应的B.asp页面，其中有js函数：

var Apphelper={
	CloseQuery:function(){
		if(val="1")return true;
		return false;
	},
	Close:function(){			
		if(parent!=null&&typeof(parent)=="object"){             
                var System=parent.System;
                if(System!=null && typeof(System)=="object"){
                    if(System.Close!=null && typeof(System.Close)=="function"){
                        System.Close();
                        return;
                    }
                }
            }
	}	
};

父页面A，通过调用自己的System.CloseFrame来调用ifrme中的函数Apphelper.CloseQuery

Ifame中的B页面，通过调用自己的Apphelper.Close函数来调用父窗口中的System.Close

当然，实现这样的简单调用有个前提，就是A和B需要同域。