JavaScript使ifram跨域相互访问及与服务器端编程语言(专业超文本预处理器的缩写)通信的实例

内联框架与主框架相互访问方法

1.同域相互访问

假设A.html与b.html域都是localhost(同域)A.html中内联框架嵌入B.html，name=myframeA.html有射流研究…函数fMain()B.html有射流研究…函数fIframe()需要实现A.html调用B.html的fIframe()，B.html调用A.html的fMain()

A.html

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML head meta http-equiv=' content-type ' content=' text/HTML；charset=utf-8 ' title main window/title script type=' text/JavaScript '/main js function function fMain(){ alert(' main function execute success ')；} //exec iframe函数函数exec _ iframe(){ window。我的框架。fif frame()；}/script/head body pA.html main/p pinput type=' button ' value=' exec iframe function ' onclick=' exec _ iframe()'/p iframe src=' http : b . html ' name=' my frame ' width=' 500 ' height=' 100 '/iframe/body/html B.html

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML head meta http-equiv=' content-type ' content=' text/HTML；charset=utf-8 ' title iframe window/title script type=' text/JavaScript '/iframe js function function fIframe(){ alert(' iframe function execute success ')；} //exec主函数函数exec _ main(){ parent。fmain()；}/script/head body pB.html iframe/p pinput type=' button ' value=' exec main function ' onclick=' exec _ main()'/p/body/html点击A.html的exec iframe功能按钮，执行成功，弹出内联框架函数执行成功。如下图

点击B.html的高级管理人员主功能按钮，执行成功，弹出主功能执行成功。如下图

2.跨域互相访问

假设A.html域是本地主机，B.html域是127.0.0.1 (跨域)这里使用本地主机与127.0.0.1 只是方便测试，localhost与127.0.0.1已经不同一个域，因此执行效果是一样的。实际使用时换成www.domaina.com与www.domainb.com即可。A.html中内联框架嵌入B.html，name=myframeA.html有射流研究…函数fMain()B.html有射流研究…函数fIframe()需要实现A.html调用B.html的fIframe()，B.html调用A.html的fMain()(跨域调用)

如果使用上面同域的方法，浏览器判断A.html与B.html不同域，会有错误提示未捕获的安全错误：阻止了源为" http://localhost "的帧访问源为"http://127.0.0.1"的帧。协议、域和端口必须匹配。

实现原理：因为浏览器为了安全，禁止了不同域访问。因此只要调用与执行的双方是同域则可以相互访问。

首先，A.html如何调用B.html的fIframe方法1.在A.html创建一个iframe2.iframe的页面放在B.html同域下，命名为execB.html3.execB.html里有调用B.html框架方法的射流研究…调用

脚本类型=' text/JavaScript '父级。窗户。我的框架。fif frame()；//执行父myframe fIframe函数/脚本这样A.html就能通过execB.html调用B.html的fIframe方法了。

同理，B.html需要调用A.html费曼方法，需要在B.html嵌入与A.html同域的execA.htmlexecA.html里有调用A.html费曼方法的射流研究…调用

脚本类型=' text/JavaScript '父级。父母。fmain()；//执行主要功能/脚本这样就能实现A.html与B.html跨域相互调用。

A.html

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML head meta http-equiv=' content-type ' content=' text/HTML；charset=utf-8 ' title main window/title script type=' text/JavaScript '/main js function function fMain(){ alert(' main function execute success ')；} //exec iframe函数函数exec _ iframe(){ if(exec _ obj的类型)=' undefined '){ exec _ obj=document。创建元素(“iframe”)；exec _ obj . name=' tmp _ frame exec _ obj。src=' http://127。0 .0 .1/Exec b . html '；exec _ obj。风格。显示='无'；文件。尸体。append child(exec _ obj)；} else { exec _ obj。src=' http://127。0 .0 .1/Exec b . html '？数学。random()；} }/script/head body pA.html main/p pinput type=' button ' value=' exec iframe function ' onclick=' exec _ iframe()'/p iframe src=' http :http://127。0 .0 .1/b . html ' name=' my frame ' width=' 500 ' height=' 100 '/iframe/body/html B.html

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML head meta http-equiv=' content-type ' content=' text/HTML；charset=utf-8 ' title iframe window/title script type=' text/JavaScript '/iframe js function function fIframe(){ alert(' iframe function execute success ')；} //exec主函数函数exec _ main(){ if(exec _ obj的类型)=' undefined '){ exec _ obj=document。创建元素(“iframe”)；exec _ obj . name=' tmp _ frame exec _ obj。src=' http://localhost/execa。html '；exec _ obj。风格。显示='无'；文件。尸体。append child(exec _ obj)；} else { exec _ obj。src=' http://localhost/execa。html？数学。random()；} }/script/head body pB.html iframe/p pinput type=' button ' value=' exec main function ' onclick=' exec _ main()'/p/body/html execA.html

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML head meta http-equiv=' content-type ' content=' text/HTML；charset=utf-8 ' title exec main function/title/head body script type=' text/JavaScript ' parent。父母。fmain()；//执行主函数/脚本/正文/html execB.html

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML head meta http-equiv=' content-type ' content=' text/HTML；charset=utf-8' title exec iframe函数/标题/标题正文脚本类型=' text/JavaScript '父级。窗户。我的框架。fif frame()；//执行父myframe fIframe函数/脚本/正文/html执行如下图：

php main与内联框架相互通讯类（同域/跨域)把主要的与内联框架相互通讯的方法封装成类，主要有两个文件，JS:FrameMessage.js实现调用方法的接口，如跨域则创建临时iframe，调用同域执行者PHP:FrameMessage.class.php实现接收到跨域请求时，根据参数返回执行方法的射流研究…代码。

功能如下：1.支持同域与跨域通讯2.传递的方法参数支持字符串，JSON，数组等。

复制代码代码如下：帧消息。exec(' http://127。0 .0 .1/execb。PHP '，' myframe '，' fIframe '，['fdipzone '，' { '性别' : '男'，'年龄' :'29'} '，'['http://blog.csdn.net/fdipzone '，' http://微博。com/fdipzone ']')；

复制代码代码如下：帧消息。exec(' http://localhost/execa。PHP '，''，' fMain '，['programmer '，' {'first':'PHP '，' second':'javascript'} '，'['EEG '，' NMG ']')；

FrameMessage.js

/**主要与内联框架相互通讯类支持同域与跨域通讯*日期： 2013-12-29 *作者： fdipzone * ver : 1.0 */var frame message=(function(){ this。oframessageexec=null//临时iframe /*执行方法执行者执行的页面，为空则为同域设计要调用的方法的框架名称，为空则为父函数要调用的方法名一个参数名要调用的方法的参数，必须为数组[arg1，arg2，arg3，argn.],方便应用调用元素为字符串格式，请不要使用html，考虑注入安全的问题会过滤*/this.exec=function(executor、frame、func、args){ this。执行者=类型(执行者)！='未定义？执行器："";this.frame=类型（框架)!='未定义？帧："";this.func=typeof(func)！='未定义？func :this.args=typeof(args)！='未定义？(_ _ fiarray(args)？args :[]):[]；//必须是数组if(executor==' '){ _ _ fsamedomainsece()；//同一个域} else { _ _ fcrossdomainesec()；//跨域} } /*同域执行*/function _ _ fsamedomainsece(){ if(this。frame==' '){//parent。窗户[这个。func].应用(这个，这个。args)；} else { window。框架[这个。框架][这个。func].应用(这个，这个。args)；} } /* 跨域执行*/function _ _ fcrossdomainesec(){ if(this。oframessagexec==null){ this。oframessageexec=document。创建元素(“iframe”)；这个。oframmessageexec。name=' frame message _ tmp _ frame这个。oframessageexec。src=_ _ fGetSrc()；这个。oframessageexec。风格。显示='无'；文件。尸体。appendchild(这个。oframmessagexec)；} else { this。oframessageexec。src=_ _ fGetSrc()；} } /* 获取执行的URL */function _ _ fGetSrc(){返回此。遗嘱执行人(这个。执行者。indexof('？')==-1?'?': ' ')“frame=”这个。frame ' func=' this。func ' args=' JSON。stringify(这个。args)frame message _ rand=' math。random()；} /* 判断是否数组*/function _ _ fiarray(obj){ return object。原型。tostring。调用(obj)='[对象数组]'；}退回这个；}());FrameMessage.class.php

？php /**框架消息类主与内联框架相互通讯类*日期： 2013-12-29 *作者： fdipzone * ver : 1.0 * * func : *公开执行根据参数调用方法*私有返回创建返回的javascript *私有jsFormat转义参数*/类框架消息{//类开始/*执行根据参数调用方法* @param String $frame要调用的方法的框架名称，为空则为父* @param String $func要调用的方法名* @param JSONstr $args要调用的方法的参数* @返回字符串*/公共静态函数执行($frame，$func，$args=''){ if(！is_string($frame) ||！is_string($func) ||！is _ string($ args)){ return " "；} //框架与功能限制只能是字母数字下划线if(($frame！='' !preg_match('/^[A-Za-z0-9_] $/'，$ frame)| |！preg_match('/^[A-Za-z0-9_] $/'，$ func){ 0返回"";} $ params _ str=if($ args){ $ params=JSON _ decode($ args，true)；if(is_array($params)){ for($i=0，$ len=count($ params)；$ i $ len$i ){ //过滤参数，防止注入$ params[$ I]=self :3360 jsformat($ params[$ I])；} $params_str=' ' .内爆(""、"、$ params ")' '；} } if($ frame==' '){//parent return self : return js(' parent。家长。)。$func .'('.$params_str .');');} else { return self : return js(' parent。窗户。)。$框架。'.'。$func .'('.$params_str .');');} } /** 创建返回的JavaScript * @ param String $ str * @ return String */private static function returnJs($ str){ $ ret=' script type=' text/JavaScript ' ' .\ r \ n '；$ret .=$str .\ r \ n '；$ret .='/script '；返回$ ret} /**转义参数* @ param String $ str * @返回String */private static函数jsFormat($ str){ $ str=strip _ tags(trim($ str))；//过滤html $str=str_replace('\\s\\s '，' \\s '，$ str)；$str=str_replace(chr(10)，''，$ str)；$str=str_replace(chr(13)，''，$ str)；$str=str_replace(“”、“”、$ str)；$str=str_replace('\\ '，' \\ '，$ str)；$str=str_replace(“”、“\”、$ str)；$str=str_replace('\\\ '，' \\\\\ '，$ str)；$str=str_replace(“”、“\”、$ str)；返回$ str} } //类结束？A.html

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML head meta http-equiv=' content-type ' content=' text/HTML；charset=utf-8 ' title主窗口/title脚本类型=' text/JavaScript ' src=' http : js 2。js '/script脚本类型=' text/JavaScript ' src=' http : frame message。js '/script脚本类型=' text/JavaScript '/主js函数fMain(职业、技能、公司){ var skill_p=JSON.parse(技能);var company _ p=JSON。解析(公司)；var msg="主函数执行成功\ n \ n”；msg=' professional : ' professional ' \ n '；msg='第一技能： ' skill _ p . first ' \ nmsg='第二技能： ' skill _ p . second ' \ nmsg=' company 1: ' company _ p[0]' \ n '；msg=' company 2: ' company _ p[1]' \ n '；警报(味精)；} //exec iframe函数function exec_iframe(){ //同域//FrameMessage.exec('、' myframe '、' fIframe '、['fdipzone '、“'性别' : '男性'、'年龄' :'29'}”、“['http://blog.csdn.net/fdipzone '、' http://微博。com/fdipzone ']')；//跨域帧消息。exec(' http://127。0 .0 .1/execb。PHP '，' myframe '，' fIframe '，['fdipzone '，' {'gender': '男性，' age':'29'} '，'['http://blog.csdn.net/fdipzone '，' http://Weibo。com/fdipzone ']')；}/script/head body pA.html main/p pinput type=' button ' value=' exec iframe function ' onclick=' exec _ iframe()'/p！-同一个域-!-iframe src=' http : b . html ' name=' my frame ' width=' 500 ' height=' 100 '/iframe-！-跨域-iframe src=' http :http://127。0 .0 .1/b . html ' name=' my frame ' width=' 500 ' height=' 100 '/iframe/body/html B.html！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML head meta http-equiv=' content-type ' content=' text/HTML；charset=utf-8 ' title iframe window/title script type=' text/JavaScript ' src=' http : js 2。js '/script type=' text/JavaScript ' src=' http : frame消息。js '/script type=' text/JavaScript '/iframe js函数fIframe(name，obj，arr){ var obj _ p=JSON。解析(obj)；var arr _ p=JSON。解析(arr)；var msg='iframe函数执行成功\ n \ n '；msg=' name : ' name ' \ nmsg=' gender : ' obj _ p . gender ' \ n '；msg=' age : ' obj _ p . age ' \ nmsg=' blog : ' arr _ p[0]' \ n；msg=' Weibo : ' arr _ p[1]' \ n；警报(味精)；} //exec主函数function exec_main(){ //同域//FrameMessage.exec('，'，'，' fMain '，['programmer '，' {'first':'PHP '，' second':'javascript'} '，'['EEG '，' NMG ']')；//跨域框架消息。exec(' http://localhost/execa。PHP '，''，' fMain '，['programmer '，' {'first':'PHP '，' second':'javascript'} '，'['EEG '，' NMG ']')；}/script/head body pB.html iframe/p pinput type=' button ' value=' exec main function ' onclick=' exec _ main()'/p/body/html execA.php与execB.php

？服务器端编程语言（Professional Hypertext Preprocessor的缩写）需要帧消息。上课。PHP '；$frame=isset($_GET['frame'])？$ _ GET[' frame ']: " "；$func=isset($_GET['func'])？$ _ GET[' func ']: " "；$args=isset($_GET['args'])？$ _ GET[' args ']: " "；$ result=frame message : execute($ frame，$func，$ args)；回声$结果；