首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript使ifram跨域相互访问及与PHP通信的实例

Posted in Javascript onMarch 03, 2016

iframe 与主框架相互访问方法

1.同域相互访问

假设A.html 与 b.html domain都是localhost （同域）
A.html中iframe 嵌入 B.html，name=myframe
A.html有js function fMain()
B.html有js function 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/html4/loose.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 function 
 function exec_iframe(){ 
 window.myframe.fIframe(); 
 } 
 </script> 
 
 </head> 
 
 <body> 
 <p>A.html main</p> 
 <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p> 
 <iframe src="B.html" name="myframe" width="500" height="100"></iframe> 
 </body> 
</html>

B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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 main function 
 function exec_main(){ 
 parent.fMain(); 
 } 
 </script> 
 
 </head> 
 
 <body> 
 <p>B.html iframe</p> 
 <p><input type="button" value="exec main function" onclick="exec_main()"></p> 
 </body> 
</html>

点击A.html 的 exec iframe function button，执行成功，弹出iframe function execute success。如下图

JavaScript使ifram跨域相互访问及与PHP通信的实例

点击B.html 的 exec main function button，执行成功，弹出 main function execute success。如下图

JavaScript使ifram跨域相互访问及与PHP通信的实例

2.跨域互相访问

假设 A.html domain是 localhost， B.html domain 是 127.0.0.1 （跨域）
这里使用 localhost 与 127.0.0.1 只是方便测试，localhost 与 127.0.0.1已经不同一个域，因此执行效果是一样的。
实际使用时换成 www.domaina.com 与 www.domainb.com 即可。
A.html中iframe 嵌入 B.html，name=myframe
A.html有js function fMain()
B.html有js function fIframe()
需要实现 A.html 调用 B.html 的 fIframe()，B.html 调用 A.html 的 fMain() （跨域调用）

如果使用上面同域的方法，浏览器判断A.html 与 B.html 不同域，会有错误提示。
Uncaught SecurityError: Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://127.0.0.1". Protocols, domains, and ports must match.

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

首先，A.html 如何调用B.html的 fIframe方法
1.在A.html 创建一个 iframe
2.iframe的页面放在 B.html 同域下，命名为execB.html
3.execB.html 里有调用B.html fIframe方法的js调用

<script type="text/javascript"> 
parent.window.myframe.fIframe(); // execute parent myframe fIframe function 
</script>

这样A.html 就能通过 execB.html 调用 B.html 的 fIframe 方法了。

同理，B.html 需要调用A.html fMain方法，需要在B.html 嵌入与A.html 同域的 execA.html
execA.html 里有调用 A.html fMain 方法的js 调用

<script type="text/javascript"> 
parent.parent.fMain(); // execute main function 
</script>

这样就能实现 A.html 与 B.html 跨域相互调用。

A.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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 function 
 function exec_iframe(){ 
 if(typeof(exec_obj)=='undefined'){ 
  exec_obj = document.createElement('iframe'); 
  exec_obj.name = 'tmp_frame'; 
  exec_obj.src = 'http://127.0.0.1/execB.html'; 
  exec_obj.style.display = 'none'; 
  document.body.appendChild(exec_obj); 
 }else{ 
  exec_obj.src = 'http://127.0.0.1/execB.html?' + Math.random(); 
 } 
 } 
 </script> 
 
 </head> 
 
 <body> 
 <p>A.html main</p> 
 <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p> 
 <iframe src="http://127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe> 
 </body> 
</html>

B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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 main function 
 function exec_main(){ 
 if(typeof(exec_obj)=='undefined'){ 
  exec_obj = document.createElement('iframe'); 
  exec_obj.name = 'tmp_frame'; 
  exec_obj.src = 'http://localhost/execA.html'; 
  exec_obj.style.display = 'none'; 
  document.body.appendChild(exec_obj); 
 }else{ 
  exec_obj.src = 'http://localhost/execA.html?' + Math.random(); 
 } 
 } 
 </script> 
 
 </head> 
 
 <body> 
 <p>B.html iframe</p> 
 <p><input 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/html4/loose.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.parent.fMain(); // execute main function 
 </script> 
 </body> 
</html>

execB.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 <title> exec iframe function </title> 
 </head> 
 
 <body> 
 <script type="text/javascript"> 
  parent.window.myframe.fIframe(); // execute parent myframe fIframe function 
 </script> 
 </body> 
</html>

执行如下图：

JavaScript使ifram跨域相互访问及与PHP通信的实例

php main 与 iframe 相互通讯类(同域/跨域)
把main与iframe相互通讯的方法封装成类，主要有两个文件，
JS：FrameMessage.js 实现调用方法的接口，如跨域则创建临时iframe，调用同域执行者。
PHP：FrameMessage.class.php 实现接收到跨域请求时，根据参数返回执行方法的JS code。

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

JavaScript使ifram跨域相互访问及与PHP通信的实例

FrameMessage.exec('http://127.0.0.1/execB.php', 'myframe', 'fIframe', ['fdipzone', '{"gender":"male","age":"29"}', '["http://blog.csdn.net/fdipzone", "http://weibo.com/fdipzone"]']); 

JavaScript使ifram跨域相互访问及与PHP通信的实例

FrameMessage.exec('http://localhost/execA.php', '', 'fMain', ['programmer', '{"first":"PHP","second":"javascript"}', '["EEG","NMG"]']);

FrameMessage.js

/** Main 与 Iframe 相互通讯类 支持同域与跨域通讯 
* Date: 2013-12-29 
* Author: fdipzone 
* Ver: 1.0 
*/ 
var FrameMessage = (function(){ 
 
 this.oFrameMessageExec = null; // 临时iframe 
 
 /* 执行方法 
 executor 执行的页面,为空则为同域 
 frame 要调用的方法的框架名称,为空则为parent 
 func  要调用的方法名 
 args  要调用的方法的参数,必须为数组[arg1, arg2, arg3, argn...],方便apply调用 
    元素为字符串格式,请不要使用html,考虑注入安全的问题会过滤 
 */ 
 this.exec = function(executor, frame, func, args){ 
 
  this.executor = typeof(executor)!='undefined'? executor : ''; 
  this.frame = typeof(frame)!='undefined'? frame : ''; 
  this.func = typeof(func)!='undefined'? func : ''; 
  this.args = typeof(args)!='undefined'? (__fIsArray(args)? args : []) : []; // 必须是数组 
 
  if(executor==''){ 
   __fSameDomainExec(); // same domain 
  }else{ 
   __fCrossDomainExec(); // cross domain 
  } 
 
 } 
 
 /* 同域执行 */ 
 function __fSameDomainExec(){ 
  if(this.frame==''){ // parent 
   parent.window[this.func].apply(this, this.args); 
  }else{ 
   window.frames[this.frame][this.func].apply(this, this.args); 
  } 
 } 
 
 /* 跨域执行 */ 
 function __fCrossDomainExec(){ 
  if(this.oFrameMessageExec == null){ 
   this.oFrameMessageExec = document.createElement('iframe'); 
   this.oFrameMessageExec.name = 'FrameMessage_tmp_frame'; 
   this.oFrameMessageExec.src = __fGetSrc(); 
   this.oFrameMessageExec.style.display = 'none'; 
   document.body.appendChild(this.oFrameMessageExec); 
  }else{ 
   this.oFrameMessageExec.src = __fGetSrc(); 
  } 
 } 
 
 /* 获取执行的url */ 
 function __fGetSrc(){ 
  return this.executor + (this.executor.indexOf('?')==-1? '?' : '&') + 'frame=' + this.frame + '&func=' + this.func + '&args=' + JSON.stringify(this.args) + '&framemessage_rand=' + Math.random(); 
 } 
 
 /* 判断是否数组 */ 
 function __fIsArray(obj){ 
  return Object.prototype.toString.call(obj) === '[object Array]'; 
 } 
 
 return this; 
 
}());

FrameMessage.class.php

<?php 
/** Frame Message class main 与 iframe 相互通讯类 
* Date: 2013-12-29 
* Author: fdipzone 
* Ver: 1.0 
* 
* Func: 
* public execute 根据参数调用方法 
* private returnJs 创建返回的javascript 
* private jsFormat 转义参数 
*/ 
 
class FrameMessage{ // class start 
 
 /* execute 根据参数调用方法 
 * @param String $frame 要调用的方法的框架名称,为空则为parent 
 * @param String $func 要调用的方法名 
 * @param JSONstr $args 要调用的方法的参数 
 * @return String 
 */ 
 public static function execute($frame, $func, $args=''){ 
 
  if(!is_string($frame) || !is_string($func) || !is_string($args)){ 
   return ''; 
  } 
 
  // frame 与 func 限制只能是字母数字下划线 
  if(($frame!='' && !preg_match('/^[A-Za-z0-9_]+$/',$frame)) || !preg_match('/^[A-Za-z0-9_]+$/',$func)){ 
   return ''; 
  } 
 
  $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::jsFormat($params[$i]); 
    } 
     
    $params_str = "'".implode("','", $params)."'"; 
   } 
  } 
 
  if($frame==''){ // parent 
   return self::returnJs("parent.parent.".$func."(".$params_str.");"); 
  }else{ 
   return self::returnJs("parent.window.".$frame.".".$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>'; 
 
  return $ret; 
 } 
 
 
 /** 转义参数 
 * @param String $str 
 * @return String 
 */ 
 private static function 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); 
 
  return $str; 
 } 
 
} // class end 
 
?>

A.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 <title> main window </title> 
 <script type="text/javascript" src="json2.js"></script> 
 <script type="text/javascript" src="FrameMessage.js"></script> 
 
 <script type="text/javascript"> 
 
 // main js function 
 function fMain(profession, skill, company){ 
 
 var skill_p = JSON.parse(skill); 
 var company_p = JSON.parse(company); 
  
 var msg = "main function execute success\n\n"; 
 msg += "profession:" + profession + "\n"; 
 msg += "first skill:" + skill_p.first + "\n"; 
 msg += "second skill:" + skill_p.second + "\n"; 
 msg += "company1:" + company_p[0] + "\n"; 
 msg += "company2:" + company_p[1] + "\n"; 
 
 alert(msg); 
 
 } 
 
 // exec iframe function 
 function exec_iframe(){ 
 // same domain 
 //FrameMessage.exec('', 'myframe', 'fIframe', ['fdipzone', '{"gender":"male","age":"29"}', '["http://blog.csdn.net/fdipzone", "http://weibo.com/fdipzone"]']); 
 
 // cross domain 
 FrameMessage.exec('http://127.0.0.1/execB.php', 'myframe', 'fIframe', ['fdipzone', '{"gender":"male","age":"29"}', '["http://blog.csdn.net/fdipzone", "http://weibo.com/fdipzone"]']); 
 } 
 </script> 
 
 </head> 
 
 <body> 
 <p>A.html main</p> 
 <p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p> 
 <!-- same domain --> 
 <!--<iframe src="B.html" name="myframe" width="500" height="100"></iframe>--> 
 <!-- cross domain --> 
 <iframe src="http://127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe> 
 </body> 
</html> 


B.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 <title> iframe window </title> 
 <script type="text/javascript" src="json2.js"></script> 
 <script type="text/javascript" src="FrameMessage.js"></script> 
 
 <script type="text/javascript"> 
 
 // iframe js function 
 function fIframe(name, obj, arr){ 
  
 var obj_p = JSON.parse(obj); 
 var arr_p = JSON.parse(arr); 
  
 var msg = "iframe function execute success\n\n"; 
 msg += "name:" + name + "\n"; 
 msg += "gender:" + obj_p.gender + "\n"; 
 msg += "age:" + obj_p.age + "\n"; 
 msg += "blog:" + arr_p[0] + "\n"; 
 msg += "weibo:" + arr_p[1] + "\n"; 
 
 alert(msg); 
 
 } 
 
 // exec main function 
 function exec_main(){ 
 // same domain 
 //FrameMessage.exec('', '', 'fMain', ['programmer', '{"first":"PHP","second":"javascript"}', '["EEG","NMG"]']); 
 
 // cross domain 
 FrameMessage.exec('http://localhost/execA.php', '', 'fMain', ['programmer', '{"first":"PHP","second":"javascript"}', '["EEG","NMG"]']); 
 } 
 </script> 
 
 </head> 
 
 <body> 
 <p>B.html iframe</p> 
 <p><input type="button" value="exec main function" onclick="exec_main()"></p> 
 </body> 
</html>

execA.php 与 execB.php

<?php 
require 'FrameMessage.class.php'; 
 
$frame = isset($_GET['frame'])? $_GET['frame'] : ''; 
$func = isset($_GET['func'])? $_GET['func'] : ''; 
$args = isset($_GET['args'])? $_GET['args'] : ''; 
 
$result = FrameMessage::execute($frame, $func, $args); 
 
echo $result; 
?>

JavaScript使ifram跨域相互访问及与PHP通信的实例

- Author -

傲雪星枫

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
vue axios整合使用全攻略
May 24 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 #Javascript
jQuery日历插件datepicker用法详解
Mar 03 #Javascript
初步使用Node连接Mysql数据库
Mar 03 #Javascript
初步使用bootstrap快速创建页面
Mar 03 #Javascript
JS动态增删表格行的方法
Mar 03 #Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 #Javascript
基于javascript html5实现多文件上传
Mar 03 #Javascript
css3 (2) pygame(3) pycharm(6) Slice(1) Qlabel(1) pyqt5(3) linux(15) DFA(1) JSON(10) MapReduce(1)
You might like
咖啡与水的关系
2021/03/03 冲泡冲煮
如何使用PHP中的字符串函数
2006/11/24 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP chr()函数讲解
2019/02/11 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
web前端开发也需要日志
2010/12/09 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python在线运行代码助手
2016/07/15 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python实现复制大量文件功能
2019/08/31 Python
SmartBuyGlasses台湾：名牌眼镜，名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
大学毕业生个人自荐书
2014/07/02 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
群众路线剖析材料
2014/09/30 职场文书
辞职信模板（中英文版）
2015/02/27 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis