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. jQuery之简单动画效果

    1. show()显示动画 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow",&quo ...

  2. [编译原理代码][NFA转DFA并最小化DFA并使用DFA进行词法分析]

    #include <iostream> #include <vector> #include <cstring> #include "stack" ...

  3. 简易浏览器App webview

    使用 public class MainActivity extends Activity {     @Override     protected void onCreate(Bundle sav ...

  4. (转)Facade模式

    Facade模式要求一个子系统的外部与其内部的通信必须通过一个统一的Facade对象进行.Facade模式提供一个高层次的接口,使得子系统更易于使用. 就如同医院的接待员一样,Facade模式的Fac ...

  5. QueryFilter与SpatialFilter - 浅谈

    我们知道,GIS不仅仅有属性查询,还有空间查询.而 QueryFilter 对应于 属性查询,而 SpatialFilter 对应于 空间查询.

  6. SignalR2.0开发实例之——设置时间、后台其他地方使用集线器、使用自己的连接ID

    一.连接的生命周期设置: 如下: // 该值表示连接在超时之前保持打开状态的时间长度. //默认为110秒 GlobalHost.Configuration.ConnectionTimeout = T ...

  7. angular请求传递不了数据

    var data={ 'id':ztreeParent.id } $http({ url:'/rcCategoryControler/deleteRcCategoryById', method:'GE ...

  8. js基本类型

    1.undefined 1)var a;//没有赋值的时候就是undefined 2)undefined派生自null,alert(undefined==null)//true 虽然这上条语句是一样, ...

  9. 剖析c++（二） 内置类型的内存形式

    分布形式以及转换时候的截断(待编辑)

  10. Mysql学习（慕课学习笔记8）插入、更新、删除记录

    插入记录 Insert[]into] tb1_name[(col_name,…..)] 自动编号的字段,可以用values default Default 可以赋予默认值 INSERT USERS V ...