JavaScript enables Ifram to cross-domain mutual access and to communicate with PHP examples _javascript tips

Method of mutual access between IFRAME and main frame

1. Mutual access to the same domain

Suppose a.html and b.html domain are localhost (same field)
B.html,name=myframe of a.html in an IFRAME
A.html has JS function Fmain ()
B.html has JS function fiframe ()
Need to implement a.html call B.html Fiframe (), b.html invoke a.html Fmain ()

A.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
 
 

B.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
 
 

Click on a.html Exec IFRAME function button, execute successfully, eject IFRAME function execute success. The following figure

Click B.html's EXEC Main function button to execute successfully and eject the main function execute success. The following figure

2. Cross-domain Mutual access

Suppose a.html domain is localhost, b.html domain is 127.0.0.1 (cross-domain)
Here the use of localhost and 127.0.0.1 is just easy to test, localhost and 127.0.0.1 are already different from one domain, so the execution effect is the same.
The actual use of www.domaina.com and www.domainb.com can be replaced.
B.html,name=myframe of a.html in an IFRAME
A.html has JS function Fmain ()
B.html has JS function fiframe ()
Need to implement a.html call B.html Fiframe (), b.html invoke A.html Fmain () (Cross-domain call)

If you use the same domain method above, the browser judges a.html and b.html different fields, there will be error prompts.
Uncaught securityerror:blocked A frame with origin "http://localhost" from accessing a and origin "http://127.0.0". 1 ". protocols, domains, and ports must match.

Implementation principle:
Because browsers prohibit different domain access for security purposes. So as long as the two sides of the call and execution are the same domain, they can access each other.

First, a.html how to invoke the B.html Fiframe method
1. Create an IFRAME in a.html
2.iframe pages are placed under b.html and named Execb.html
A JS call in the 3.execb.html called the b.html Fiframe method

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

So a.html can invoke the Fiframe method of b.html by execb.html.

Similarly, the b.html needs to invoke the A.html Fmain method, which needs to be embedded in b.html with a.html of the same domain execa.html
A JS call in the execa.html called the a.html Fmain method

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

This enables a.html and b.html to invoke each other across domains.

A.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >  

B.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
 
 

Execb.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
 
 

Execute the following figure:

PHP Main and IFRAME Mutual communication class (same domain/cross-domain)
the method of communication between main and IFrame is encapsulated into class, there are two files,
JS:FrameMessage.js the interface that implements the calling method, such as Cross-domain, creates a temporary IFRAME, and invokes the same domain performer.
When the PHP:FrameMessage.class.php implementation receives a CROSS-DOMAIN request, it returns the JS code of the execution method based on the parameter.

Features are as follows:
1. Support for same-domain and Cross-domain communication
2. Passed method parameters support strings, JSON, arrays, and so on.

Copy Code code as follows:

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

Copy Code code as follows:

Framemessage.exec (' http://localhost/execA.php ', ', ' fmain ', [' Programmer ', ' {' A ']: "PHP", "second": "JavaScript"} ', ' [EEG, ' NMG ']];

Framemessage.js

/** Main and Iframe Mutual communication classes support same domain and cross-domain communication * date:2013-12-29 * Author:fdipzone * ver:1.0 * * var framemessage = (function ()   {this.oframemessageexec = null;//temporary IFRAME/* Execution Method executor the page to be executed, NULL is the frame name of the method to invoke, NULL is parent func The method name to be invoked args the parameters of the method to invoke, must be an array [Arg1, arg2, Arg3, argn ...], easy to apply invoke element to string format, please do not use HTML, consider inject security problem will filter/This.ex 
  EC = 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: []): []; Must be an array if (executor== ') {__fsamedomainexec ();//same domain}else{__fcrossdomainexec ();//Cross Domai n}}/* The same domain execute/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); /* cross-Domain Execute/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 (); /* Get execution URL/function __fgetsrc () {return this.executor + this.executor.indexOf ('? ') ==-1? '? ': ' & ') + ' frame= ' + this.frame + ' &func= ' + this.func + ' &args= ' + json.stringify (This.args) + ' &frame 
 Message_rand= ' + math.random (); 
 }/* Determines whether array/function __fisarray (obj) {return Object.prototype.toString.call (obj) = = ' [Object Array] '; 
 
return to this; 

 }());

FrameMessage.class.php

<?php/** Frame Message class Main and IFRAME mutual communication class * date:2013-12-29 * author:fdipzone * ver:1.0 * Func: * Public execute invokes methods based on parameters * Private RETURNJS Create the returned JavaScript * private Jsformat Escape Parameters/Class framemessage{//Class S Tart/* Execute calls Method * @param string $frame The frame name of the method to be invoked, NULL is parent * @param String $func The method name to invoke * @param JS ONSTR $args The parameter of the method to be invoked * @return String/public static function execute ($frame, $func, $args = ') {if (!is_strin G ($frame) | | !is_string ($func) | | 
  !is_string ($args)) {return '; }//Frame and Func limit can only be alphanumeric underline 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 + +) {//filter parameters to prevent injection $params [$i] = SELF::JSFO 
    Rmat ($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."); ");} /** Create the returned 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; /** Escape parameter * @param string $STR * @return string/private static function Jsformat ($STR) {$str = Stri P_tags (Trim ($STR)); 
  Filter HTML $STR = str_replace (' \\s\\s ', ' \\s ', $str); 
  $STR = Str_replace (CHR), ", $STR); 
  $STR = Str_replace (Chr, ", $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" > 
<?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; 
? >