作者：虛情徦噫d_951 | 来源：互联网 | 2024-10-12 20:47
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
B.html
点击A.html 的 exec iframe function button，执行成功，弹出iframe function execute success。如下图
点击B.html 的 exec main function button，执行成功，弹出 main function execute success。如下图
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调用
这样A.html 就能通过 execB.html 调用 B.html 的 fIframe 方法了。
同理，B.html 需要调用A.html fMain方法，需要在B.html 嵌入与A.html 同域的 execA.html
execA.html 里有调用 A.html fMain 方法的js 调用
这样就能实现 A.html 与 B.html 跨域相互调用。
A.html
B.html
execA.html
execB.html
执行如下图：
php main 与 iframe 相互通讯类(同域/跨域)
把main与iframe相互通讯的方法封装成类，主要有两个文件，
JS：FrameMessage.js 实现调用方法的接口，如跨域则创建临时iframe，调用同域执行者。
PHP：FrameMessage.class.php 实现接收到跨域请求时，根据参数返回执行方法的JS code。
功能如下：
1.支持同域与跨域通讯
2.传递的方法参数支持字符串，JSON，数组等。
代码如下:
FrameMessage.exec(&＃39;http://127.0.0.1/execB.php&＃39;, &＃39;myframe&＃39;, &＃39;fIframe&＃39;, [&＃39;fdipzone&＃39;, &＃39;{"gender":"male","age":"29"}&＃39;, &＃39;["http://blog.csdn.net/fdipzone", "http://weibo.com/fdipzone"]&＃39;]);
代码如下:
FrameMessage.exec(&＃39;http://localhost/execA.php&＃39;, &＃39;&＃39;, &＃39;fMain&＃39;, [&＃39;programmer&＃39;, &＃39;{"first":"PHP","second":"Javascript"}&＃39;, &＃39;["EEG","NMG"]&＃39;]);
FrameMessage.js
FrameMessage.class.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=&＃39;&＃39;){
if(!is_string($frame) || !is_string($func) || !is_string($args)){
return &＃39;&＃39;;
}
// frame 与 func 限制只能是字母数字下划线
if(($frame!=&＃39;&＃39; && !preg_match(&＃39;/^[A-Za-z0-9_]+$/&＃39;,$frame)) || !preg_match(&＃39;/^[A-Za-z0-9_]+$/&＃39;,$func)){
return &＃39;&＃39;;
}
$params_str = &＃39;&＃39;;
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 = "&＃39;".implode("&＃39;,&＃39;", $params)."&＃39;";
}
}
if($frame==&＃39;&＃39;){ // 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 = &＃39;
A.html
execA.php 与 execB.php
require &＃39;FrameMessage.class.php&＃39;;
$frame = isset($_GET[&＃39;frame&＃39;])? $_GET[&＃39;frame&＃39;] : &＃39;&＃39;;
$func = isset($_GET[&＃39;func&＃39;])? $_GET[&＃39;func&＃39;] : &＃39;&＃39;;
$args = isset($_GET[&＃39;args&＃39;])? $_GET[&＃39;args&＃39;] : &＃39;&＃39;;
$result = FrameMessage::execute($frame, $func, $args);
echo $result;
?>
京公网安备 11010802041100号