热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

iframe与主框架相互访问方法1.同域相互访问假设A.html


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

Javascript使ifram跨域相互访问及与PHP通信的实例_Javascript技巧 - 文章图片

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

Javascript使ifram跨域相互访问及与PHP通信的实例_Javascript技巧 - 文章图片

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


执行如下图:

Javascript使ifram跨域相互访问及与PHP通信的实例_Javascript技巧 - 文章图片



php main 与 iframe 相互通讯类(同域/跨域)

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

JS:FrameMessage.js 实现调用方法的接口,如跨域则创建临时iframe,调用同域执行者。

PHP:FrameMessage.class.php 实现接收到跨域请求时,根据参数返回执行方法的JS code。

功能如下:

1.支持同域与跨域通讯

2.传递的方法参数支持字符串,JSON,数组等。

Javascript使ifram跨域相互访问及与PHP通信的实例_Javascript技巧 - 文章图片

代码如下:
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通信的实例_Javascript技巧 - 文章图片

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

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=''){
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 = "&#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;
?>



推荐阅读
  • 搭建简单Ext
    一、EXT是什么?1.Ext是一个Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的bs应用更加具有活力及生命力࿰ ... [详细]
  • 什么是reactReact是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。为什么需要reduxreact只涉 ... [详细]
  • Linux DNS
    libnss_files.solibnss_dnslibnss_ldap展现的就是一个配置文件etcnsswitch.conf?查看这个文件这个files就是通过libnss_fi ... [详细]
  • 本文目录一览:1、ECharts柱状图怎么随机颜色 ... [详细]
  • 1、什么是javascript?答:网景面向对象的脚本语言客服端控制2、为什么学习javascript?答:注入思想,提高用户体验,兼容性好,入门简单,跨平台,减轻服务器的压力。3 ... [详细]
  • $(document).ready没有 ... [详细]
  • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
  • 我要用Direct3D建立一个虚拟的屋子,然后把我的视角放到屋子里面,并且可以水平旋转,就象是虚拟现实空间那样。其实就跟DOOM类游戏一样。并且能够用PICK函数去选取在指定点 ... [详细]
  • 编写基于jQuery的插件的方法
    注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到1:添加全局类的方法常用的ajax ... [详细]
  • 我有Codeigniters安全问题.我的Codeigniter安装具有应用程序文件夹,系统文件夹和资产文件夹.在我的Assets文件夹中有一个第三方PHP脚本. ... [详细]
  • k8s之Service介绍
    1、Service是什么?​Service是一种k8s集群中访问pod的一种策略。k8s中的pod具有生命周期,且不可复活。每个pod有着自己的IP地址,pod的销毁与创建都会创新 ... [详细]
  • MongoDB——聚合操作详解
    聚合(Aggregation)为集合文档数据提供各种处理数据方法,并返回计算结果。MongoDB提供了3种方式来执行聚合命令࿱ ... [详细]
  • 一、使用ContentProvider(内容提供者)共享数据ContentProvider在android中的作用是对外共享数据,也就是说 ... [详细]
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • 通过手机浏览器调用客户端QQ
    php教程|php手册thinkphp代码,代码示例,代码参考,php短信,数据库备份代码,令牌验证,去除代码中的空白和注释调用QQ客户端php教程-php手册可调用iosandr ... [详细]
author-avatar
虛情徦噫d_951
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有