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

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

点击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调用

<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?' + 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?' + 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>

执行如下图：

web项目跨域访问的更多相关文章

  1. Web Api跨域访问配置及调用示例

    1.Web Api跨域访问配置. 在Web.config中的system.webServer内添加以下代码: <httpProtocol> <customHeaders> &l ...

  2. JAVA - SpringBoot项目跨域访问

    JAVA - SpringBoot添加支持CORS跨域访问 CORS(Cross-Origin Resource Sharing)“跨域资源共享”,是一个W3C标准,它允许浏览器向跨域服务器发送Aja ...

  3. Web API 跨域访问（CORS）

    1.在web.config里把“    <remove name="OPTIONSVerbHandler" />  ”删掉. 2. 到nuget上装一个包:    ht ...

  4. ssm项目跨域访问

    最近使用ssm开发了一个项目,为了项目的开发速度,采用的是前后端同时开发,所以前端文件没有集成在项目中,最后在调试时涉及到了跨域.跨域的解决方法很多,我采用的是最简单的一种,代码如下: 新建一个过滤器 ...

  5. ASP.NET Web API 跨域访问（CORS）

    一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...

  6. 两个java项目,跨域访问时,浏览器不能正确解析数据问题

    @Controller@RequestMapping(value = "api/item/cat")public class ApiItemCatController { @Aut ...

  7. ASP.NET Web API 跨域访问（CORS）要注意的地方

    一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...

  8. ASP.NET Web API 跨域访问

    自定义特性 要在WebApi中实现JSONP,一种方式是实现自定义特性  http://stackoverflow.com/questions/9421312/jsonp-with-asp-net-w ...

  9. web api 跨域访问

    在工程中 Install-Package Microsoft.AspNet.WebApi.Cors 在 webapiconfig.cs中 config.EnableCors(); 在 控制器中, [E ...

随机推荐

  1. JAVA程序猿怎么才干高速查找到学习资料？

    JAVA程序猿怎么才干高速查找到学习资料? JAVA学习资料在互联网上较为零散,并且大多是英文的.以下介绍3种方式,让程序猿能够高速地找到自己想要的资料. 一．导航站点: 有非常多类似hao123的站 ...

  2. C++ operator关键字（重载操作符）(转)

    operator是C++的关键字,它和运算符一起使用,表示一个运算符函数,理解时应将operator=整体上视为一个函数名. 这是C++扩展运算符功能的方法,虽然样子古怪,但也可以理解:一方面要使运算 ...

  3. Java基础知识强化58：经典排序之二叉树排序（BinaryTreeSort）

    1. 二叉树排序 二叉树排序的描述也是一个递归的描述, 所以二叉树排序的构造自然也用递归的: 二叉排序树或者是一棵空树,或者是具有下列性质的二叉树: (1)若左子树不空,则左子树上所有结点的值均小于它 ...

  4. UltraEdit环境下，php简单环境配置

    1.语法高亮 菜单->视图->查看方式->选中“PHP” 2.自动补全 菜单->高级->配置->自动完成->选中“自动显示自动完成对话框”,字符数选择2-3为 ...

  5. centos上如何安装mysql

    centos可以使用yum安装mysql 但是版本很低,且不灵活. 本文将介绍如何使用安装包安装mysql http://dev.mysql.com/downloads/mysql/ 下载mysql ...

  6. DG下手工处理v$archive_gap方法

    从9i以后,oracle dataguard 备库一般都不需要手工处理丢失的日志,FAL自动会帮我们处理,下面通过个案例来讲下手工处理丢失的日志的方法: 1.在备库查询有哪些日志丢失,没应用到备库 S ...

  7. hook技术分类

    1.HOOK SERVICE TABLE:HOOK SSDT 这种方法对于拦截 NATIVE API 来说用的比较多. SSDT hook,一句话——Windows把需要调用的内核API地址全都存在了 ...

  8. C# 获取计算机 信息

    /// <summary> /// 获取本机 机器名 /// </summary> /// <returns></returns> public sta ...

  9. 获取aplicationContext对象，从而获取任何注入的对象

    在Servlet中 方法一: 从ServletContext 取出 Spring容器上下文 ApplicationContext applicationContext = (ApplicationCo ...

  10. js和jquery中的触发事件

    改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...