찾다
집웹 프론트엔드JS 튜토리얼iram이 도메인 간에 서로 액세스하고 PHP_javascript 기술과 통신할 수 있도록 하는 JavaScript의 예
iram이 도메인 간에 서로 액세스하고 PHP_javascript 기술과 통신할 수 있도록 하는 JavaScript의 예
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:12 PM
htmljavascriptjsphp교차 도메인통신

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。如下图

201633165209664.jpg (537×208)

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

201633165228804.jpg (536×208)

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&#63;' + 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&#63;' + 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>

执行如下图：

201633165339112.jpg (529×214)


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

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

201633165429252.jpg (549×249)

复制代码 代码如下:
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"]']); 

201633170000506.jpg (527×242)

复制代码 代码如下:
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'&#63; executor : ''; 
  this.frame = typeof(frame)!='undefined'&#63; frame : ''; 
  this.func = typeof(func)!='undefined'&#63; func : ''; 
  this.args = typeof(args)!='undefined'&#63; (__fIsArray(args)&#63; 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('&#63;')==-1&#63; '&#63;' : '&') + '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

<&#63;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 
 
&#63;>

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

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
관련 기사
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

20+道必知必会的Vue面试题（附答案解析）20+道必知必会的Vue面试题（附答案解析）Apr 06, 2021 am 09:41 AM

本篇文章整理了20+Vue面试题分享给大家，同时附上答案解析。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

Repo : 팀원을 부활시키는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
4 몇 주 전ByDDD
R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?
4 몇 주 전ByDDD
더보기

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?
7365
15
자바 튜토리얼
1628
14
Cakephp 튜토리얼
1353
52
라라벨 튜토리얼
1266
25
PHP 튜토리얼
1214
29
더보기