搜尋
首頁後端開發php教程php main 與 iframe 相互通訊類別介紹

php main 與 iframe 相互通訊類別介紹

Sep 16, 2017 am 09:30 AM
iframemainphp

这篇文章主要介绍了php main 与 iframe 相互通讯类(js+php同域/跨域),需要的朋友可以参考下

main 与 iframe 相互通讯类

之前写过一篇《iframe与主框架跨域相互访问方法》,介绍了main与iframe相互通讯的原理,不了解原理的可以先看看。

今天把main与iframe相互通讯的方法封装成类,主要有两个文件,

JS:FrameMessage.js 实现调用方法的接口,如跨域则创建临时iframe,调用同域执行者。
PHP:FrameMessage.class.php 实现接收到跨域请求时,根据参数返回执行方法的JS code。

功能如下:

1.支持同域与跨域通讯
2.传递的方法参数支持字符串,JSON,数组等。

复制代码 代码如下:


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"]']); 

复制代码 代码如下:


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

因部分浏览器不支持JSON.stringify 与JSON.parse 方法(如IE6/7),为了兼容,需要包含json2.js,下载地址:

https://github.com/douglascrockford/JSON-js

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=&#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;<script type="text/javascript">&#39;."\r\n";
    $ret .= $str."\r\n";
    $ret .= &#39;</script>&#39;;

    return $ret;
  }


  /** 转义参数
  * @param String $str
  * @return String
  */
  private static function jsFormat($str){

    $str = strip_tags(trim($str)); // 过滤html
    $str = str_replace(&#39;\\s\\s&#39;, &#39;\\s&#39;, $str);
    $str = str_replace(chr(10), &#39;&#39;, $str);
    $str = str_replace(chr(13), &#39;&#39;, $str);
    $str = str_replace(&#39; &#39;, &#39;&#39;, $str);
    $str = str_replace(&#39;\\&#39;, &#39;\\\\&#39;, $str);
    $str = str_replace(&#39;"&#39;, &#39;\\"&#39;, $str);
    $str = str_replace(&#39;\\\&#39;&#39;, &#39;\\\\\&#39;&#39;, $str);
    $str = str_replace("&#39;", "\&#39;", $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(&#39;&#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;]);

	// cross domain
	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;]);
 }
 </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(&#39;&#39;, &#39;&#39;, &#39;fMain&#39;, [&#39;programmer&#39;, &#39;{"first":"PHP","second":"javascript"}&#39;, &#39;["EEG","NMG"]&#39;]);

	// cross domain
	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;]); 
 }
 </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 &#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;
?>

以上是php main 與 iframe 相互通訊類別介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
超越炒作:評估當今PHP的角色超越炒作:評估當今PHP的角色Apr 12, 2025 am 12:17 AM

PHP在現代編程中仍然是一個強大且廣泛使用的工具,尤其在web開發領域。 1)PHP易用且與數據庫集成無縫,是許多開發者的首選。 2)它支持動態內容生成和麵向對象編程,適合快速創建和維護網站。 3)PHP的性能可以通過緩存和優化數據庫查詢來提升,其廣泛的社區和豐富生態系統使其在當今技術棧中仍具重要地位。

PHP中的弱參考是什麼?什麼時候有用?PHP中的弱參考是什麼?什麼時候有用?Apr 12, 2025 am 12:13 AM

在PHP中,弱引用是通過WeakReference類實現的,不會阻止垃圾回收器回收對象。弱引用適用於緩存系統和事件監聽器等場景,需注意其不能保證對象存活,且垃圾回收可能延遲。

解釋PHP中的__ Invoke Magic方法。解釋PHP中的__ Invoke Magic方法。Apr 12, 2025 am 12:07 AM

\_\_invoke方法允許對象像函數一樣被調用。 1.定義\_\_invoke方法使對象可被調用。 2.使用$obj(...)語法時,PHP會執行\_\_invoke方法。 3.適用於日誌記錄和計算器等場景,提高代碼靈活性和可讀性。

解釋PHP 8.1中的纖維以進行並發。解釋PHP 8.1中的纖維以進行並發。Apr 12, 2025 am 12:05 AM

Fibers在PHP8.1中引入,提升了並發處理能力。 1)Fibers是一種輕量級的並發模型,類似於協程。 2)它們允許開發者手動控制任務的執行流,適合處理I/O密集型任務。 3)使用Fibers可以編寫更高效、響應性更強的代碼。

PHP社區:資源,支持和發展PHP社區:資源,支持和發展Apr 12, 2025 am 12:04 AM

PHP社區提供了豐富的資源和支持,幫助開發者成長。 1)資源包括官方文檔、教程、博客和開源項目如Laravel和Symfony。 2)支持可以通過StackOverflow、Reddit和Slack頻道獲得。 3)開發動態可以通過關注RFC了解。 4)融入社區可以通過積極參與、貢獻代碼和學習分享來實現。

PHP與Python:了解差異PHP與Python:了解差異Apr 11, 2025 am 12:15 AM

PHP和Python各有優勢,選擇應基於項目需求。 1.PHP適合web開發,語法簡單,執行效率高。 2.Python適用於數據科學和機器學習,語法簡潔,庫豐富。

php:死亡還是簡單地適應?php:死亡還是簡單地適應?Apr 11, 2025 am 12:13 AM

PHP不是在消亡,而是在不斷適應和進化。 1)PHP從1994年起經歷多次版本迭代,適應新技術趨勢。 2)目前廣泛應用於電子商務、內容管理系統等領域。 3)PHP8引入JIT編譯器等功能,提升性能和現代化。 4)使用OPcache和遵循PSR-12標準可優化性能和代碼質量。

PHP的未來:改編和創新PHP的未來:改編和創新Apr 11, 2025 am 12:01 AM

PHP的未來將通過適應新技術趨勢和引入創新特性來實現:1)適應云計算、容器化和微服務架構,支持Docker和Kubernetes;2)引入JIT編譯器和枚舉類型,提升性能和數據處理效率;3)持續優化性能和推廣最佳實踐。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境