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. 浅谈C++中的那些内存泄露

    尽管学过C语言.可是C++里面的一些基础还是不太懂,还须要再掌握. 老范也開始要讲C++设计模式了,必须快点看了.不然就要白花窝滴钱了. 对于内存泄露,我的个人理解就是程序在执行过程中,自己开辟了空间 ...

  2. 使用Eclipse生成自动生成apk

    使用Eclipse生成自动生成apk     在eclipse的Preferences -> Android -> Build中有一项“Skip packaging and dexing ...

  3. XML解析器(TinyXML)的使用指南

    关于XML文件的解析方法的引导, 大家可以去试试这个工具(TinyXML) 1.首先下载TinyXML库的文件,这里给出链接,大家自己去下吧,记着要上国际http://prdownloads.sour ...

  4. ViewDragHelper详解

    2013年谷歌i/o大会上介绍了两个新的layout: SlidingPaneLayout和DrawerLayout,现在这俩个类被广泛的运用,其实研究他们的源码你会发现这两个类都运用了ViewDra ...

  5. HTML与CSS入门——第四章 理解层叠样式表

    知识点: 1.创建基本样式表的方法 2.使用样式类的方法 3.使用样式ID的方法 4.构建内部样式表和嵌入样式的方法 4.1 CSS工作原理: CSS:层叠样式表的缩写,是一种定义样式结构如字体.颜色 ...

  6. arcgis server manager - An error has occured on the server. For details please check the Event (Application) log on the web.

    当登陆 Arcgis Server Manager的时候,点击 "Services" 中的选项"Manage Services",就报错: An error h ...

  7. UILable  /  UITextField  /   UIButton

    // 获取屏幕大小的view UIView *contentView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds]; // ...

  8. JAVADOC 常见使用方法 帮助文档

    我们知道Java中有三种注释语句: 1.//用于单行注释. 2./*...*/用于多行注释,从/*开始,到*/结束,不能嵌套. 3./**...*/则是为支持jdk工具javadoc.exe而特有的注 ...

  9. itext poi 学习之旅 （2）创建excel

    Computer.java package com.qiang.poi; public class Computer { private int id; private String name; pr ...

  10. 成员函数的const不能被修改，包括指针

    #include <iostream> class A { private: std::string a; public: A(std::string b) :a(b){} const c ...